Question

在我的Angular5应用程序中，我有一个名为＆＃39; admin＆＃39; （/ admin），有子路由器＆＃39; news＆＃39; / admin /（admin：news），我想创建链接到组件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
          }
        ]
      }
    ]
  }

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

这是工作，我的网址更改为/ 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']}}]"

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

1 个答案: