Link 从同一路由器插座到另一个组件

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

我想创建 link 从 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 正在创建相对路径。

来自文档：Router Link Description

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.

你可以在outlets前面加上/admin/来得到想要的路径。

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

Link 从同一路由器插座到另一个组件

Link to one component from another from the same router-outlet

router-outlet

angular

angular-router