组件不会在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>作为直接子代）。

Answer 2

[在<mat-sidenav-content>中有<mat-sidenav-container>时，您不能在<mat-sidenav-container>中添加自定义html。相反，您必须在<app-inner-sidenav>内添加<mat-sidenav-content>。