在多个Ionic标签页中使用自定义Angular组件遇未知元素问题

核心结论 #

可以直接把自定义组件分别导入到每个标签页的独立模块里使用，不是必须新建共享模块——当然共享模块是更优雅的长期方案，但直接导入完全可行。

直接导入组件的操作步骤 #

假设你的自定义组件是CustomComponent，路径为src/app/components/custom/custom.component.ts：

• 打开tab1.module.ts，先导入组件：

  import { CustomComponent } from '../components/custom/custom.component';
  

• 在模块的declarations数组里添加该组件：

  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      Tab1PageRoutingModule
    ],
    declarations: [Tab1Page, CustomComponent]
  })
  export class Tab1PageModule {}
  

• 对tab2.module.ts和tab3.module.ts重复上面的导入和声明操作

为什么在tabs.module.ts声明没用？ #

Ionic tabs模板里的每个标签页都是独立的NgModule，TabsPageModule作为父模块，和标签页模块是平级关系（标签页通过路由懒加载）。Angular的组件作用域规则是：组件只能在声明它的模块以及该模块的直接子组件里用，父模块声明的组件无法被平级的懒加载模块访问，这就是你之前操作无效的根本原因。

额外说明 #

如果不想重复写三次导入代码，创建共享模块是更高效的选择：

1. 新建SharedModule，在其中声明并导出CustomComponent
2. 每个标签页模块只需要导入SharedModule就能使用组件

但如果你的组件只在这三个标签页使用，且不想多建模块，直接导入到每个标签模块完全没问题。

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