一个 Angular 组件的 2 条路线

Question

我想知道是否有可能有 2 条不同的路线指向 1 个单个组件？例如：

{ path: 'signin', component: SignInComponent },
{ path: 'tenant/:id/signin', component: SignInComponent }

我问是因为我有一些有线行为..

Answer 1

是的，您可以使用 2 条指向同一组件的不同路径。但是当你从一个路由导航到另一个使用与前一个路由相同的组件的路由时，angular 会重用你的组件实例。它不会创建组件的新实例。

如果您将从 'signin' 导航到 'tenant/:id/signin'，那么 angular 将使用它为 'signin' 创建的 SignInComponent 实例。不会调用 SignInComponent 的构造函数和 init 方法。您可以在 init 方法中使用 observable。ActivatedRoute 的 params 方法是一个可观察的。您可以执行以下操作来提取参数：

route 是您的 ActivatedRoute 实例

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

switchMap 运算符允许您使用 Observable 的当前值执行操作，并将其映射到新的 Observable。此代码从服务的路由中获取具有指定 id 的英雄。你可以做这样的事情。如果您将发布代码，那么我可以告诉您您需要做什么。