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

2020-07-07 13:37 更新

有時(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ù)中注入 ActivatedRouteRouter,這樣在這個(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],
}
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)