Angular9 訪問(wèn)查詢(xún)參數(shù)與片段

有時(shí)，應(yīng)用中的某個(gè)特性需要訪問(wèn)路由的部件，比如查詢(xún)參數(shù)或片段（fragment）。本教程的這個(gè)階段使用了一個(gè)“英雄指南”中的列表視圖，你可以在其中點(diǎn)擊一個(gè)英雄來(lái)查看詳情。路由器使用 id 來(lái)顯示正確的英雄的詳情。

首先，在要導(dǎo)航的組件中導(dǎo)入以下成員。

//Component import statements (excerpt)


import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

接下來(lái)，注入當(dāng)前路由（ActivatedRoute）服務(wù)：

//Component (excerpt)


constructor(private route: ActivatedRoute) {}

配置這個(gè)類(lèi)，讓你有一個(gè)可觀察對(duì)象 heroes$、一個(gè)用來(lái)保存英雄的 id 號(hào)的 selectedId，以及 ngOnInit() 中的英雄們，添加下面的代碼來(lái)獲取所選英雄的 id。這個(gè)代碼片段假設(shè)你有一個(gè)英雄列表、一個(gè)英雄服務(wù)、一個(gè)能獲取你的英雄的函數(shù)，以及用來(lái)渲染你的列表和細(xì)節(jié)的 HTML，就像在《英雄指南》例子中一樣。

//Component 1 (excerpt)


heroes$: Observable;
selectedId: number;
heroes = HEROES;


ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap(params => {
      this.selectedId = Number(params.get('id'));
      return this.service.getHeroes();
    })
  );
}

接下來(lái)，在要導(dǎo)航到的組件中，導(dǎo)入以下成員。

//Component 2 (excerpt)


import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';

在組件類(lèi)的構(gòu)造函數(shù)中注入 ActivatedRoute 和 Router，這樣在這個(gè)組件中就可以用它們了：

//Component 2 (excerpt)


item$: Observable;


  constructor(
    private route: ActivatedRoute,
    private router: Router  ) {}


  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');
    this.hero$ = this.service.getHero(id);
  }


  gotoItems(item: Item) {
    let heroId = item ? hero.id : null;
    // Pass along the item id if available
    // so that the HeroList component can select that item.
    this.router.navigate(['/heroes', { id: itemId }]);
  }

惰性加載

你可以配置路由定義來(lái)實(shí)現(xiàn)惰性加載模塊，這意味著 Angular 只會(huì)在需要時(shí)才加載這些模塊，而不是在應(yīng)用啟動(dòng)時(shí)就加載全部。 另外，你可以在后臺(tái)預(yù)加載一些應(yīng)用部件來(lái)改善用戶(hù)體驗(yàn)。

關(guān)于惰性加載和預(yù)加載的詳情，請(qǐng)參見(jiàn)專(zhuān)門(mén)的指南惰性加載 NgModule。

防止未經(jīng)授權(quán)的訪問(wèn)

使用路由守衛(wèi)來(lái)防止用戶(hù)未經(jīng)授權(quán)就導(dǎo)航到應(yīng)用的某些部分。Angular 中提供了以下路由守衛(wèi)：

• CanActivate
• CanActivateChild
• CanDeactivate
• Resolve
• CanLoad

要想使用路由守衛(wèi)，可以考慮使用無(wú)組件路由，因?yàn)檫@對(duì)于保護(hù)子路由很方便。

為你的守衛(wèi)創(chuàng)建一項(xiàng)服務(wù)：

ng generate guard your-guard

請(qǐng)?jiān)谑匦l(wèi)類(lèi)里實(shí)現(xiàn)你要用到的守衛(wèi)。下面的例子使用 CanActivate 來(lái)保護(hù)該路由。

//Component (excerpt)


export class YourGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}

在路由模塊中，在 routes 配置中使用相應(yīng)的屬性。這里的 canActivate 會(huì)告訴路由器它要協(xié)調(diào)到這個(gè)特定路由的導(dǎo)航。

//Routing module (excerpt)


{
  path: '/your-path',
  component: YourComponent,
  canActivate: [YourGuard],
}