Link 到另一个没有出口的组件

Question

在我的 Angular5 应用程序中，我有一个名为 'admin' (/admin) 的路由器出口，它有子路由器 'news' /admin/(admin:news)，我想创建 link 到组件 CreatePostComponent /admin/(admin:news/new-post).

这是我的路由器：

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

和模板中的link：<a [routerLink]="['new-post']">New post</a>

这是有效的，我的 url 更改为 /admin/(admin:news/new-post)，但我仍然看到 NewsComponent，而不是 CreatePostComponent。我应该如何正确执行此操作？

此外，我可以在命名路由器出口（/admin/news，而不是 /admin/(admin:news)）中使用普通类型的 url；

Answer 1

如果您的 NewsComponent 没有 router-outlet 您的路由器应该如下所示：

{
    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',
      }
    ]
  }

这就是您重用出口并模拟子路由的方式

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

呼叫您的 link 的路由应该类似于

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

或

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

Link 到另一个没有出口的组件

Link to another component without outlet

angular-routing

router-outlet

angular