Angular 15.1.0中'tab'/'pane'未知元素（NG8001）问题求助

问题原因 #

你编写的Tab组件和Pane指令未在Angular模块中注册，导致编译器无法识别这些自定义元素。Angular规则明确：所有在模板中使用的组件、指令、管道，必须在对应模块的declarations数组中声明。

解决步骤 #

1. 打开你的模块文件（通常是app.module.ts，若为特性模块则对应模块文件）
2. 导入Tab、Pane和ContentChildComponent
3. 将这三者添加到模块的declarations数组中

修改后的模块代码示例 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入你的组件和指令
import { ContentChildComponent, Tab, Pane } from './content-child/content-child.component';

@NgModule({
  declarations: [
    ContentChildComponent,
    Tab,
    Pane // 必须注册这个指令
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [ContentChildComponent]
})
export class AppModule { }

补充说明 #

如果你的项目使用独立组件（Angular 14+支持），则需在ContentChildComponent的imports数组中导入Tab和Pane：

@Component({
  selector: 'app-content-child',
  template: `...`,
  standalone: true,
  imports: [Tab, Pane] // 独立组件需在此导入依赖的组件/指令
})
export class ContentChildComponent {
  // ... 原有代码
}

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