Angular 18中NavbarComponent无法渲染：如何正确接入App组件模板？

非独立组件接入步骤 #

如果使用非独立组件模式，需确保以下配置正确：

• 为NavbarComponent创建对应模块（如NavbarModule），在模块的declarations数组中声明该组件，并在exports数组中暴露它，让父模块能访问到组件选择器：

@NgModule({
  declarations: [NavbarComponent],
  exports: [NavbarComponent],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    RouterModule
  ]
})
export class NavbarModule {}

• 在AppModule的imports数组中导入NavbarModule，这样AppComponent的模板就能正常使用<app-navbar>标签。

独立组件配置步骤 #

改为独立组件后，除了导入Material相关模块，还需补充必要的依赖模块：

• 修改NavbarComponent的装饰器，开启standalone: true，并将CommonModule、RouterModule、Material模块加入imports数组（模板用到了routerLink和属性绑定指令）：

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    RouterModule
  ],
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
  isNavbarOpen = false;

  toggleNavbar() {
    this.isNavbarOpen = !this.isNavbarOpen;
  }
}

• 如果AppComponent是独立组件，直接在其imports数组中加入NavbarComponent；如果是基于模块的项目，在AppModule的imports数组中导入该独立组件。

常见排查点 #

• 查看浏览器控制台报错，若提示选择器未找到，优先检查组件是否被正确导入/暴露
• 确认@angular/material已正确安装并初始化，避免Material模块缺失导致的渲染失败
• 检查routerLink依赖的RouterModule是否已在全局或组件级别导入

UPDATE 2：已找到可行解决方案，但表格排序暂未正常工作。

内容的提问来源于stack exchange，提问作者J.Olufsen