angular - 从同一个路由器插座链接到另一个组件

Question

我的 Angular 5 应用程序中有多个路由器插座。

其中一个看起来像这样：

  {
    path: "admin",
    component: AdminComponent,
    children: [
      {
        path: "",
        redirectTo: "/admin/(admin:news)",
        pathMatch: "full"
      },
      {
        path: "news",
        component: NewsComponent,
        outlet: 'admin'
      },
      {
        path: "new-post",
        component: CreatePostComponent,
        outlet: 'admin'
      }
    ]

我想创建从 NewsComponent 到 CreatePostComponent 的链接（/admin/(admin:news)=> /admin/(admin:new-post)：

<a [routerLink]="[{outlets: {admin:'new-post'}}]">Add Post</a>

但这是试图创建路径/admin/(admin:news)/(admin:new-post)（而不是/admin/(admin:new-post).

我应该如何正确地做到这一点？

Answer 1

这是因为routerLink正在创建相对路径。

来自文档：路由器链接描述

If the first segment begins with /, the router will look up the route from the root of the app.

If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.

您可以/admin/在前面添加outlets以获得所需的路径。

<a [routerLink]="['/admin/', {outlets: {admin:['new-post']}}]">Add Post</a>