组件不在 Angular 9 中的子路由内呈现

Question

这是我的 app.component.html:

<app-sidenav></app-sidenav>

和sidenav.component.html:

<mat-sidenav-container class="some-class">
    <mat-sidenav opened mode="side">
        ...
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts:

const routes: Routes = [

  { path: '', redirectTo: '/home', pathMatch: 'full', },
  { path: 'home', component: HomeComponent, },
  { path: 'admin', redirectTo: '/admin/users', pathMatch: 'full', },
  { path: 'admin', children: [{
      path: 'permissions', component: PermissionsComponent, }, {
      path: 'users', component: UsersComponent, },]},
];

其中一个路由组件是 UsersComponent 并且具有以下模板：

<mat-toolbar>
  <h1 class="headline">Administration</h1>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav opened mode="side">
    ...
  </mat-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

直到这里，这都按预期工作。但是当我创建一个新组件时（比如 inner-sidenav 使用以下模板（来自 UsersComponent）：

<mat-sidenav opened mode="side">
  ...
</mat-sidenav>

并将UsersComponent的模板更新为：

<mat-toolbar>
  <h1 class="headline">Administration</h1>
</mat-toolbar>

<mat-sidenav-container>
    <app-inner-sidenav></app-inner-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

内部的 mat-sidenav（应该代替 app-inner-sidebar 渲染）根本不渲染。我错过了什么？

更新：

要重现该问题，请访问 here。

Answer 1

@Hasan 原因是 Material Sidenav 的嵌套规则。您不能将 "foreign" 元素作为 <mat-sidenav-container> 的直接子元素（很像 <table> 只能将 <thead>, <tbody>, <tr> 作为直接子元素）。

相反，Users 组件标记应为：

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
      <app-inner-sidenav></app-inner-sidenav>
    </mat-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

和内部导航栏组件标记应该是：

<a [routerLink]="['/admin/users']">Users</a>

Answer 2

如果 <mat-sidenav-container> 中有 <mat-sidenav-content>，则无法在 <mat-sidenav-container> 中添加自定义 html。相反，您必须在 <mat-sidenav-content>.

中添加 <app-inner-sidenav>

<mat-sidenav-container>
  <mat-sidenav opened mode="side">
    <a [routerLink]="['/admin/users']">Users hehe</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-inner-sidenav></app-inner-sidenav>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

或者您可以像这样删除 <mat-sidenav-content>

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
        <a [routerLink]="['/admin/users']">Users hehe</a>
    </mat-sidenav>
    <app-inner-sidenav></app-inner-sidenav>
    <p>users works!</p>
</mat-sidenav-container>

组件不在 Angular 9 中的子路由内呈现

Component doesn't render within child route in Angular 9

angular-material

angular-material2

angular

angular9