Ionic 3中如何添加组件并在无模块页面中使用？

嘿，我懂你想要简单直接的实现，不用折腾复杂的配置，这就给你说最省心的步骤：

第一步：确认组件模块已导出你的组件 #

ionic自动生成的components.module.ts其实已经帮你把组件加入声明和导出了，但还是检查一下更稳妥，确保它长这样：

import { NgModule } from '@angular/core';
import { MyComponent } from './my-component/my-component';

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent] // 必须导出，外部模块才能访问
})
export class ComponentsModule {}

第二步：在根模块（app.module.ts）导入组件模块 #

因为你的页面没有单独的模块，所以直接把ComponentsModule加到根模块的imports数组里就行，这样整个应用都能访问到这个组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// 引入你的组件模块
import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ComponentsModule // 把它加到这里！
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

第三步：直接在页面HTML里用组件 #

打开你的页面HTML（比如home.page.html），直接写组件的选择器就行，ionic生成的组件默认选择器是app-你的组件名，所以这里就是：

<app-my-component></app-my-component>

要是不确定选择器，去my-component.ts里看selector字段确认就行～

额外说一句（如果之后想转懒加载） #

要是哪天想改用懒加载，只需要给你的页面创建单独模块（比如home.module.ts），然后在这个页面模块的imports里加入ComponentsModule就行，现在先按上面的步骤来，绝对是最省事的方式。

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