时间戳

首页 > 解决方案 > 角度改变子路径

angular - 角度改变子路径

问题描述

我是 Angular 的新手，所以这对某些人来说似乎是一个显而易见的问题，但我似乎找不到答案。我创建了一些这样的路线：

const routes: Routes = [
  {
    path: 'steps', children: [
      {
        path: 'one', component: OneComponent, children: [
          {
            path: 'two', component: TwoComponent, children: [
              {
                path: 'three', component: ThreeComponent, children: [
                  { path: 'results', component: ResultsComponent }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

我创建了一组按钮来导航这些视图：

<a class="btn btn-primary" [routerLink]="['home']" [routerLinkActive]="['active']">Home</a>
<a class="btn btn-primary" [routerLink]="['/steps', 'one']" [routerLinkActive]="['active']">One</a>
<a class="btn btn-primary" [routerLink]="['/steps', 'one', 'two']" [routerLinkActive]="['active']">Two</a>
<a class="btn btn-primary" [routerLink]="['/steps', 'one', 'two', 'three']" [routerLinkActive]="['active']">Three</a>
<a class="btn btn-primary" [routerLink]="['/steps', 'one', 'two', 'three', 'results']" [routerLinkActive]="['active']">Results</a>

他们正在按预期工作。我唯一的问题是网址。它们如下：

我希望他们是：

但工作方式与他们目前的工作方式完全相同。这可以做到吗？

标签： angular

解决方案

const routes: Routes = [
  {
    path: 'steps', children: [
    { path: 'one', component: OneComponent},
    {
        path: 'two', component: OneComponent, children: [
          {
            path: '', component: TwoComponent
          }
        ]
    },
    {
        path: 'three', component: OneComponent, children: [
          {
            path: '', component: TwoComponent, children: [
              {
                path: '', component: ThreeComponent
              }
            ]
          }
        ]
    },
    {
        path: 'results', component: OneComponent, children: [
          {
            path: '', component: TwoComponent, children: [
              {
                path: '', component: ThreeComponent, children: [
                  { path: '', component: ResultsComponent }
                ]
              }
            ]
          }
        ]
    }

    ]
  }
];

推荐阅读