Angular 6.0.3 HTML 组件选择器不起作用答案

【问题标题】：Angular 6.0.3 HTML Component selector not workingAngular 6.0.3 HTML 组件选择器不起作用
【发布时间】：2018-11-27 03:42:44
【问题描述】：

角度组件的 Html 选择器未呈现。
这是模块路由文件。

const routes: Routes = [
     {
          path: 'lms',
          canActivate: [AuthGuard],     
          component: LibraryHomeComponent,
          children: [
               { path: 'book/list', component: BookListComponent }
          ]
     }
];

@NgModule({
     imports : [          
          RouterModule.forChild(routes)
     ],
     providers: [
          AuthGuard
     ],
     exports: [ RouterModule ]
})
export class BookRouteModule {}

之后，我定义了模块。该模块是系统的一个子模块。

@NgModule({
     imports: [
          BookRouteModule,
          MatImportModule
     ],
     declarations: [
          BookListComponent,
          LibraryNavbarComponent, /* <== declared here */
          LibraryHomeComponent          
     ]
})
export class BookModule {}

在Library Home Component模板文件中，导航栏组件是使用html标签初始化的。

<mat-sidenav-container class="all-content">
  <app-library-navbar></app-library-navbar>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

下面是库导航栏组件。

@Component({
  selector: 'app-library-navbar',
  templateUrl: './library-navbar.component.html',
  styleUrls: ['./library-navbar.component.css']
})
export class LibraryNavbarComponent implements OnInit {}

【问题讨论】：

你检查控制台，是否有任何错误？
是的。控制台没有显示任何错误。
mat-sidenav-container 正在渲染？
是的。我刚刚将 sidebar 移动到另一个组件。

标签： angular angular-components angular6

【解决方案1】：

问题是由于 Angular Material SideNav 结构损坏造成的。与 HTML 表格一样，您似乎无法将 Angular Material 组件的结构分解为不同的组件。当我将 <mat-sidenav mode="side" opened> 移动到 Home 组件时，它可以工作。

<mat-sidenav-container class="all-content">
  <mat-sidenav mode="side" opened>
    <app-library-navbar></app-library-navbar>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

【讨论】：

重启应用即可。 “ng serve” 用于 cli，它可以工作。