Angular 6.0.3 HTML 组件选择器不工作

Question

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

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 组件模板文件中，导航栏组件使用 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 {}

Answer 1

问题是由于损坏的 Angular Material SideNav 结构造成的。就像 HTML table 一样，您似乎无法将 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>

Angular 6.0.3 HTML 组件选择器不工作

Angular 6.0.3 HTML Component selector not working

angular-components

angular

angular6