Question

在我的angular4项目中，我正在尝试实现子路由。和路线是

path: 'adminPanel', component: AdminPanelComponent,
children: [
  {
    path: '',
    redirectTo: 'dashboard', pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'setting1',
    component: Setting1Component
  },
  {
    path: 'setting2',
    component: Setting2Component
  },
]

，链接在AdminPanelComponent中提供为

 <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact : true}">
        <a [routerLink]="dashboard">Dashboard</a>
    </li>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact : true}">
        <a [routerLink]="setting1">setting1</a>
    </li>
    <li >
        <a [routerLink]="setting2">setting2</a>
    </li>

在运行代码时，只有“仪表板”组件正常工作，导航到父“adminPanel”时默认加载，因为它是父级的默认子级。

但是当我点击它们时，其他两个链接都不起作用。但是当我在地址栏上手动输入网址时，它会重定向到所需的组件。

经过大量调整后，我发现当我将路径值更改为数字时（这里''仪表板'变为'1'，'设置1'变为'2'，'设置3'变为'3'），这是< / p>

<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact : true}">
        <a [routerLink]="1">setting1</a>
    </li>
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact : true}">
        <a [routerLink]="2">Dashboard</a>
    </li>
    <li >
        <a [routerLink]="3">setting2</a>
    </li>

以及appRoutes

我错过了什么吗？

Answer 1

你的语法错了。它应该是

routerLink="setting1"

或

[routerLink]="['setting1']"

使用您正在使用的语法，setting1是一个角度表达式，因此Angular将其评估为theCurrentComponent.setting1，即当前组件的名为setting1的属性。

Angular 4 Child Route仅适用于数字

1 个答案: