Ionic 4(Angular 7)-共享组件问题 [英] Ionic 4 (Angular 7) - sharing components issue
问题描述
我正在尝试为像Angular这样的框架做一个非常平常的事情.目标是通过共享模块不止一次使用同一( HeaderComponent )组件.
I'm trying to do an extremely usual thing for such a framework like Angular. The goal is to use the same (HeaderComponent) component more than once through a shared module.
我的shared.module.ts:
My 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中,我添加了以下内容:
In app.module.ts I added this:
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SharedModule],
在home.page.html中,我尝试用这种方式呈现它:
And in home.page.html I tried to render it this way:
<app-header></app-header>
由于浏览器向我显示了
'ion-col'不是已知元素
'ion-col' is not a known element
,依次类推 HeaderComponent 中的所有离子组分.
and so on for all the ionic components from the HeaderComponent.
我在Internet上找到了解决该问题的方法,建议将IonicModule.forRoot(HeaderComponent)
添加到 shared.module.ts 的 imports 数组中,但是这种方法导致以下错误:
I've found a solution for the issue over the Internet that suggest adding IonicModule.forRoot(HeaderComponent)
to the imports array of the shared.module.ts, but this approach causes the following error:
"app-header"不是已知元素
'app-header' is not a known element
好像不再可用了.
推荐答案
您还必须像这样将离子模块添加到共享模块中:
you additionally have to add the ionic module to your shared module like this:
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 {}
如果您使用离子4,则必须将IonicModule的导入编辑为此:
if you are using ionic 4 you have to edit the import of IonicModule to this:
import { IonicModule } from '@ionic/angular';
这篇关于Ionic 4(Angular 7)-共享组件问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!