一个 Angular 组件的 2 条路线答案

【问题标题】：2 routes for one Angular component一个 Angular 组件的 2 条路线
【发布时间】：2016-12-22 06:24:35
【问题描述】：

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

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

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

【问题讨论】：

是的，有可能。如何处理组件内部的功能实现由您决定
是的，可以用吗？你能说出你面临的问题吗？
routerLinkActive 未激活，我刚刚更新了示例
routerLinkActive 不适用于第二条路由。哪里有问题？
@Vnuuk，你能发布你的路由的相关代码吗，这不是很有帮助，例如导航和订阅以及其他相关的东西。

标签： angular angular2-routing typescript2.0

【解决方案1】：

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

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

route 是您的 ActivatedRoute 实例

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

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

【讨论】：

角度如何区分不同的组件？如果有两条路线，例如user 和user/:gender，则它们之间的导航工作正常，但从user/male 到user/female 失败。
我没有得到你的问题。你能解释一下吗？
对不起，我没有说清楚。有两条路线使用相同的组件，例如{path: 'user', component: UserComponent} 和{path:'user/:gender', component: UserComponent}。导航在角度 2 中从 /user 到 /user/male 工作正常，反之亦然。但它在/user/male 和/user/female 之间失败了。我的意思是 Angular 在前一种情况下创建新组件，即使组件相同，但不是在后一种情况下。
好的，现在我了解您所面临的问题了。但这不应该是 Angular 在这两种情况下都应该重用组件的情况。如果可以请分享一些代码，那么我将能够提供更多帮助。
原因应该是/user/male和/user/female路径匹配为相同的路由规则，所以angular会复用组件实例。相比之下，/user 和 /user/xxx 的规则是不同的。