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

Posted 2023-03-13

【中文标题】Angular 6.0.3 HTML 组件选择器不起作用

【英文标题】：Angular 6.0.3 HTML Component selector not working

【发布时间】：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 移动到另一个组件。

【参考方案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，它可以工作。