Angular9 访问查询参数与片段

2020-07-07 13:37 更新

有时,应用中的某个特性需要访问路由的部件,比如查询参数或片段(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';

在组件类的构造函数中注入 ActivatedRouteRouter,这样在这个组件中就可以用它们了:

//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],
}
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号