Question

我定义了以下路线：

const routes: Routes = [
  { path: 'login', component: LoginComponent, pathMatch: 'full' },
  { path: 'dashboard', component: AppContentComponentComponent, pathMatch: 'full', children: [
    { path: 'dashboard', outlet: 'siteContent', component: UserDashboardComponent, pathMatch: 'full' },
    { path: 'person/edit/:personId', outlet: 'siteContent', component: PeopleEditComponent },
    { path: 'person/add', component: PeopleEditComponent },
    { path: 'person', outlet: 'siteContent', component: PeopleListingComponent, pathMatch: 'prefix' },
    { path: '', component: UserDashboardComponent, outlet: 'siteContent', pathMatch: 'full' },
  ]},
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

Login组件的router-outlet在AppComponent中定义，如下所示：

<router-outlet></router-outlet>

然后，“仪表板”应以不同的样式呈现在不同的router-outlet中。 router-outlet在AppContentComponent中定义，如下所示：

<div class="side-menu">
  <app-nav-bar></app-nav-bar>
</div>
<div class="content-wrapper">
    <router-outlet name="siteContent"></router-outlet>
</div>

我的棘手问题是，在成功验证用户身份之后，我可以导航到“仪表板”路线，并且现在我可以看到side nav bar，匿名用户应该看不到。我面临的问题是，我无法导航到已定义的任何子路线。

我尝试在路由上设置outlet属性，并尝试了不同的路由方式，例如：

<a href="#" routerLink="/person" routerLinkActive="active">People</a>
<a href="#" routerLink="./person" routerLinkActive="active">People</a>
<a href="#" routerLink="../person" routerLinkActive="active">People</a>

我在这里想念什么？

Answer 1

删除“ href =“＃”属性中的标签。

Answer 2

routerLink属性实际上是指令的输入（因此，请确保添加周围的方括号），并且期望某些东西像变量一样被取消引用。您可以通过在诸如[routerLink]="'person'"或[routerLink]="['person']"这样的硬编码字符串周围添加单引号来解决解引用位。或仅将其绑定到ts文件变量，然后使其取消引用，例如：[routerLink]="personUrl"。

Answer 3

应该是这样的例子：

<a routerLink="/dashboard/person" routerLinkActive="active">People</a>

努力导航到子路线Angular

3 个答案: