添加组件内容时，Angular7 Material7.3侧栏切换停止工作

Question

我刚刚设置了一个新项目，并且成功设置了侧边栏，并且每当我有新组件并路由到该组件时，如果使用菜单按钮进行切换，它都可以正常工作，但是当将内容添加到新组件中时，它将停止工作。 / p>

app.component.ts

str

register.component.ts 和任何具有>>> "\\info\\more info\\nName" # repr produced by simply evaluating it, which shows backslashes doubled, but there's really only one each time "\\info\\more info\\nName" >>> print("\\info\\more info\\nName") # print shows the "real" contents \info\more info\nName >>> print("\\info\\more info\nName") # With new line left in place \info\more info Name >>> print(r"\info\more info\nName") # Same as first option, but raw string means no doubling backslashes \info\more info\nName 的组件都会破坏sidenav

<!--The content below is only a placeholder and can be replaced.-->

<mat-toolbar  color="primary">
  <mat-toolbar-row>
    <!-- Menu Toggle -->
    <button type="button" mat-icon-button (click)="drawer.toggle()">
      <mat-icon>menu</mat-icon> 
    </button>
    <h3>Penaid</h3>
    <!-- Spacer -->
    <span class="fill-space"></span>
    <mat-icon aria-label="Dashboard button">logout</mat-icon>
    <!-- Drop down Toggle -->
    <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon> 
    </button>

  </mat-toolbar-row>
  <!-- #Toolbar end -->
</mat-toolbar>

<mat-menu #appMenu="matMenu" xPosition="after" yPosition="above">
  <a target="_blank" href="https://emailserver.com/webmail" mat-menu-item>Webmail</a>
  <a mat-menu-item routerLink="/register">Register user</a>
  <a mat-menu-item routerLink="/">Logout</a>
</mat-menu>


<mat-sidenav-container class="main-container" >
  <mat-sidenav #sidebar class="sidenav" mode="over">
    <!-- Route Links -->
    <nav>
      <ul>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/dashboard">
            <mat-icon aria-label="Dashboard button">dashboard</mat-icon>
            Dashboard 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">

            <a  mat-flat-button routerLink="/payment">
              <mat-icon aria-label="Payment button">money</mat-icon>
              Payment 
            </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">

          <a  mat-flat-button routerLink="/analytics">
            <mat-icon aria-label="Analytics button">bar_chart</mat-icon>
            Analytics 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/customers">
            <mat-icon aria-label="Customers button">person</mat-icon>
            Customers 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/institutions">
            <mat-icon aria-label="Institution button">house_bank</mat-icon>
            Institution 
          </a>
        </li>
      </ul>
    </nav>
  </mat-sidenav>
    <!-- Main content -->
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>

</mat-sidenav-container>

观察 如果我删除<mat-xxxx>并使用常规标签，一切都会再次正常运行，因为我使用的是角形材料

，所以我尝试向其中添加内容的每个组件都是这种情况