angular - 链接到没有插座的另一个组件

Question

在我的 Angular5 应用程序中，我有一个名为“admin”（/admin）的路由器出口，它有子路由器“news”/admin/（admin:news），我想创建指向组件 CreatePostComponent/admin/（admin:news/）的链接最新帖子）。

这是我的路由器：

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

并在模板中链接：<a [routerLink]="['new-post']">New post</a>

这是工作，我的 url 更改为 /admin/(admin:news/new-post)，但我仍然看到 NewsComponent，而不是 CreatePostComponent。我应该如何正确地做到这一点？

另外，我可以在命名路由器出口中有普通类型的网址吗（/admin/news，而不是 /admin/(admin:news)）；

Answer 1

如果您的 NewsComponent 没有路由器插座，您的路由器应该如下所示：

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

这就是您如何重用插座并模拟子路线

如果你有一个路由器插座，你只会在里面显示一个组件

调用您的链接的路线应如下所示

[routerLink]="[{outlets:{admin:['news','new-post']}}]"

或者

[routerLink]="[{outlets:{admin:['news/new-post']}}]"