Question

角度组件的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标记初始化navbar组件。

<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>

以下是Library Navbar Component。

@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表一样，似乎无法将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组件选择器无法正常工作

1 个答案: