Question

我正在使用离子中的自定义组件。

我在app.html中有一个菜单，我使用延迟加载页面。

我尝试将该组件实现到app.html的菜单中以及一些页面中。

但我只能将它实现到app.html或网页中，而不是两者中。

当我仅在app.module.ts中包含该组件时，该组件在app.html中工作，但如果我在页面模板中包含该组件，则会出现以下错误：

未捕获（承诺）：错误：模板解析错误： 'fa-icon'不是已知元素： 1.如果'fa-icon'是Angular组件，则验证它是否是此模块的一部分。 2.如果'fa-icon'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息。

当我在app.module.ts和页面模块中包含该组件时，我收到以下错误，因为它也包含在app.module.ts中：

Uncaught（承诺）：错误：类型FaIconComponent是2个模块声明的一部分：AppModule和BookingMasterPageModule！请考虑将FaIconComponent移动到导入AppModule和BookingMasterPageModule的更高模块。您还可以创建一个新的NgModule，它导出并包含FaIconComponent，然后在AppModule和BookingMasterPageModule中导入NgModule。

所以我的问题是：如何在app.html和我的网页中使用该组件？

Answer 1

好吧，第二个错误会为您提供所需的所有信息。您需要创建一个模块，让它调用它ComponentsModule并声明并导出该模块中的所有组件。然后，您可以在任意位置导入ComponentsModule

components.module.ts

@NgModule({
    declarations: [MyComponent],
    exports: [MyComponent] // this line is important. If you forget it, other modules won't be able to use this component
})
export class ComponentsModule {}

app.module.ts

@NgModule({
    imports: [ComponentsModule]
})
export class AppModule {}

custom-page.module.ts

@NgModule({
    imports: [ComponentsModule]
})
export class CustomPageModule {}

app.component.ts和pages中的离子组件

1 个答案: