本篇內(nèi)容主要講解“Angular路由中的懶加載、守衛(wèi)、動(dòng)態(tài)參數(shù)是什么意思”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Angular路由中的懶加載、守衛(wèi)、動(dòng)態(tài)參數(shù)是什么意思”吧!

成都創(chuàng)新互聯(lián)是一家專業(yè)提供雄縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為雄縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

路由懶加載

Angular可以根據(jù)路由，動(dòng)態(tài)加載相應(yīng)的模塊代碼，這個(gè)功能是性能優(yōu)化的利器。

為了加快首頁的渲染速度，我們可以設(shè)計(jì)如下的路由，讓首頁盡量保持簡(jiǎn)潔、清爽：

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'list',
        loadChildren: () => import('./components/list/list.module').then(m => m.ListModule),
      },
      {
        path: 'detail',
        loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),
      },
      ...
    ],
  },
];

首頁只有一些簡(jiǎn)單的靜態(tài)元素，而其他頁面，比如列表、詳情、配置等模塊都用loadChildren動(dòng)態(tài)加載。

效果如下：

其中的components-list-list-module-ngfactory.js文件，只有當(dāng)訪問/list路由時(shí)才會(huì)加載。

路由守衛(wèi)

當(dāng)我們?cè)L問或切換路由時(shí)，會(huì)加載相應(yīng)的模塊和組件，路由守衛(wèi)可以理解為在路由加載前后的鉤子，最常見的是進(jìn)入路由的守衛(wèi)和離開路由的守衛(wèi)：

• canActivate 進(jìn)入守衛(wèi)

• canDeactivate 離開守衛(wèi)

比如我們想在用戶進(jìn)入詳情頁之前，判斷他是否有權(quán)限，就可以使用canActivate守衛(wèi)。

增加路由守衛(wèi)

{
  path: 'detail',
  loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),

  // 路由守衛(wèi)
  canActivate: [AuthGuard],
},

編寫守衛(wèi)邏輯

使用CLI命令創(chuàng)建路由守衛(wèi)模塊：

ng g guard auth

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { DetailService } from './detail.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private detailService: DetailService,
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return new Observable(observer => {
      // 鑒權(quán)數(shù)據(jù)從后臺(tái)接口異步獲取
      this.detailService.getDetailAuth().subscribe((hasPermission: boolean) => {
        observer.next(hasPermission);
        observer.complete();
      });
    });
  }
}

獲取權(quán)限service

獲取權(quán)限的service：

ng g s detail

detail.service.ts

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get('/detail/auth');
  }
}

效果如下：

由于我們對(duì)/detail路由增加了守衛(wèi)，不管是從別的路由切換到/detail路由，還是直接訪問/detail路由，都無法進(jìn)入該頁面。

動(dòng)態(tài)路由參數(shù)

在路由中帶參數(shù)有很多中方法：

• 在path中帶參數(shù)

• 在queryString中帶參數(shù)

• 不通過鏈接帶參數(shù)

在path中帶參

{
  path: 'user/:id',
  loadChildren: () => import('./components/user/user.module').then(m => m.UserModule),
},

在queryString中帶參數(shù)

html傳參

<a [routerLink]="['/list']" [queryParams]="{id: '1'}">...</a>

ts傳參

this.router.navigate(['/list'],{ queryParams: { id: '1' });

通過data傳遞靜態(tài)參數(shù)

注意：通過data傳遞的路由參數(shù)只能是靜態(tài)的

{
  path: 'detail',
  loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),
  
  // 靜態(tài)參數(shù)
  data: {
    title: '詳情'
  }
},

通過resolve傳遞動(dòng)態(tài)參數(shù)

data只能傳遞靜態(tài)參數(shù)，那我想通過路由傳遞從后臺(tái)接口獲取到的動(dòng)態(tài)參數(shù)，該怎么辦呢？

答案是通過resolve配置。

{
  path: 'detail',
  loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule),
  
  // 動(dòng)態(tài)路由參數(shù)
  resolve: {
    detail: DetailResolver
  },
},

創(chuàng)建Resolver

detail.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DetailService } from './detail.service';

@Injectable({ providedIn: 'root' })
export class DetailResolver implements Resolve<any> {

  constructor(private detailService: DetailService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return this.detailService.getDetail();
  }
}

在服務(wù)中增加獲取詳情數(shù)據(jù)的方法

detail.service.ts

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DetailService {
  constructor(
    private http: HttpClient,
  ) { }

  getDetailAuth(): any {
    return this.http.get('/detail/auth');
  }

  // 增加的
  getDetail(): any {
    return this.http.get('/detail');
  }
}

獲取動(dòng)態(tài)參數(shù)

創(chuàng)建組件

ng g c detial

detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    // 和獲取靜態(tài)參數(shù)的方式是一樣的
    const detail = this.route.snapshot.data.detail;
    console.log('detail:', detail);
  }

}

到此，相信大家對(duì)“Angular路由中的懶加載、守衛(wèi)、動(dòng)態(tài)參數(shù)是什么意思”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：Angular路由中的懶加載、守衛(wèi)、動(dòng)態(tài)參數(shù)是什么意思
當(dāng)前網(wǎng)址：http://vcdvsql.cn/article18/pejidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、微信小程序、服務(wù)器托管、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)