Angular侧边导航组件无法在app.component.html正常显示求助

1. 修正组件调用标签 #

你的SideNavComponent在side-nav.component.ts中定义的selector是app-side-nav，必须使用匹配的标签才能正确调用组件。

打开app.component.html，将：

<side-nav></side-nav>

替换为：

<app-side-nav></app-side-nav>

2. 确保Angular Material列表模块已导入 #

侧边导航使用了mat-list和mat-list-item组件，这些属于MatListModule，未导入的话组件内容不会渲染。

打开./material/material.module.ts，添加MatListModule的导入和导出：

import { NgModule } from '@angular/core';
import { MatListModule } from '@angular/material/list';
// 保留你已有的其他Material模块导入

@NgModule({
  imports: [
    MatListModule,
    // 其他模块
  ],
  exports: [
    MatListModule,
    // 其他模块
  ]
})
export class MaterialModule {}

如果没有单独的MaterialModule，也可以直接在AppModule的imports数组中添加MatListModule。

3. 重启开发服务器验证 #

完成修改后，重启Angular开发服务器（执行ng serve重新启动），刷新页面即可看到侧边导航内容正常渲染。

内容的提问来源于stack exchange，提问作者prawlercode