Question

我是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>

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

/ steps / one
/ steps / one / two
/ steps /一/二/三
/ steps /一/二/三/结果

我希望他们成为：

/ steps / one
/ steps / two
/ steps / three
/步骤/结果

但工作方式与当前工作方式完全相同。能做到吗？

Answer 1

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

    ]
  }
];

Answer 2

这个怎么样？因为儿童是一系列元素...

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

角度更改子路径

2 个答案: