Angular9 访问查询参数与片段

有时，应用中的某个特性需要访问路由的部件，比如查询参数或片段（fragment）。本教程的这个阶段使用了一个“英雄指南”中的列表视图，你可以在其中点击一个英雄来查看详情。路由器使用 id 来显示正确的英雄的详情。

首先，在要导航的组件中导入以下成员。

//Component import statements (excerpt)


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

接下来，注入当前路由（ActivatedRoute）服务：

//Component (excerpt)


constructor(private route: ActivatedRoute) {}

配置这个类，让你有一个可观察对象 heroes$、一个用来保存英雄的 id 号的 selectedId，以及 ngOnInit() 中的英雄们，添加下面的代码来获取所选英雄的 id。这个代码片段假设你有一个英雄列表、一个英雄服务、一个能获取你的英雄的函数，以及用来渲染你的列表和细节的 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();
    })
  );
}

接下来，在要导航到的组件中，导入以下成员。

//Component 2 (excerpt)


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

在组件类的构造函数中注入 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 }]);
  }

惰性加载

你可以配置路由定义来实现惰性加载模块，这意味着 Angular 只会在需要时才加载这些模块，而不是在应用启动时就加载全部。另外，你可以在后台预加载一些应用部件来改善用户体验。

关于惰性加载和预加载的详情，请参见专门的指南惰性加载 NgModule。

防止未经授权的访问

使用路由守卫来防止用户未经授权就导航到应用的某些部分。Angular 中提供了以下路由守卫：

CanActivate
CanActivateChild
CanDeactivate
Resolve
CanLoad

要想使用路由守卫，可以考虑使用无组件路由，因为这对于保护子路由很方便。

为你的守卫创建一项服务：

ng generate guard your-guard

请在守卫类里实现你要用到的守卫。下面的例子使用 CanActivate 来保护该路由。

//Component (excerpt)


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

在路由模块中，在 routes 配置中使用相应的属性。这里的 canActivate 会告诉路由器它要协调到这个特定路由的导航。

//Routing module (excerpt)


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