Angular 4子路由始终包含来自父级的参数

Question

我有一个 Angular 4 网络应用程序，目前托管一个多租户站点。

示例 url 类似于

www.example.com/tenant/

我已按如下方式设置我的路线，让自己成为“租户守卫”，确保在尝试渲染路线之前始终拥有此属性

const routes: Routes = [
  {
    path: ':tenant',
    canActivate: [TenantGuard, AuthGuard],
    children: [
      {
        path: 'protected',
        component: ProtectedComponent,
      },
    ],
  },
];

我想要确保我的路由器链接始终包含租户。

目前，我的导航组件看起来像

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" [routerLink]="['']">ng-webapp</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link"  [routerLink]="['']">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"  [routerLink]="['protected']">Protected</a>
    </li>
  </ul>
</nav>

然而，点击“受保护”实际上会将我发送到

www.example.com/protected/

如何在我的子组件上设置任何链接以包含父路由中的租户参数？

www.example.com/tenant/protected/

我考虑过的一种方法是从我的子组件周围传递ActivatedRoute 服务并在组件内构造网址。

这似乎有点低效，有没有另一种方法可以做到这一点，而不在每个组件中都包含路由器？

Answer 1

[routerLink]="['protected']"

实际上是告诉路由器在当前的router-outlet中寻找路由。

所以我想你不是在子出口，而是在根出口，对吧？

如果你想重定向到受保护，你必须这样做：

[routerLink]="[userTenant, 'protected']"

或者，如果您的第一个租户已设置，

[routerLink]="['first-tenant', 'protected']"