angular - Ionic 4 (Angular 7) - 共享组件问题

Question

我正在尝试为像 Angular 这样的框架做一件非常平常的事情。目标是通过共享模块多次使用相同的 (HeaderComponent) 组件。

我的 shared.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HeaderComponent } from '../header/header.component';
import { IonicModule} from '@ionic/angular';

@NgModule({
    imports: [
        CommonModule, 
        IonicModule
    ],
    declarations: [
        HeaderComponent
    ],
    exports: [
        HeaderComponent
    ]
})

export class SharedModule {}

在 app.module.ts 中我添加了这个:

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SharedModule],

在 home.page.html 中，我尝试以这种方式呈现它:

<app-header></app-header>

它确实有效，因为浏览器向我显示了类似

的错误

'ion-col' is not a known element

对于 HeaderComponent 中的所有 ionic 组件，依此类推。

我在 Internet 上找到了该问题的解决方案，建议将 IonicModule.forRoot(HeaderComponent) 添加到 shared.module 的 imports 数组中.ts，但这种方法会导致以下错误:

'app-header' is not a known element

就好像它不再可用了。

Answer 1

您还必须像这样将 ionic 模块添加到您的共享模块中:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HeaderComponent } from '../header/header.component';
import { IonicModule } from 'ionic-angular';

@NgModule({
  imports: [
    CommonModule,
    IonicModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent
  ]
})

export class SharedModule {}

如果您使用的是 ionic 4，则必须将 IonicModule 的导入编辑为:

import { IonicModule } from '@ionic/angular';