Angular9 訪問查詢參數(shù)與片段

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

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

//Component import statements (excerpt)


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

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

//Component (excerpt)


constructor(private route: ActivatedRoute) {}

配置這個類，讓你有一個可觀察對象 heroes$、一個用來保存英雄的 id 號的 selectedId，以及 ngOnInit() 中的英雄們，添加下面的代碼來獲取所選英雄的 id。這個代碼片段假設(shè)你有一個英雄列表、一個英雄服務(wù)、一個能獲取你的英雄的函數(shù)，以及用來渲染你的列表和細(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();
    })
  );
}

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

//Component 2 (excerpt)


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

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

//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 }]);
  }

惰性加載

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

關(guān)于惰性加載和預(yù)加載的詳情，請參見專門的指南惰性加載 NgModule。

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

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

• CanActivate
• CanActivateChild
• CanDeactivate
• Resolve
• CanLoad

要想使用路由守衛(wèi)，可以考慮使用無組件路由，因為這對于保護子路由很方便。

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

ng generate guard your-guard

請在守衛(wèi)類里實現(xiàn)你要用到的守衛(wèi)。下面的例子使用 CanActivate 來保護該路由。

//Component (excerpt)


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

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

//Routing module (excerpt)


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