离子3导入自定义组件

我坚持用导入自定义组件插入到页面中的离子3.这是比较琐碎的离子2，但我似乎无法得到它的离子3.离子3导入自定义组件

我有工作一个名为other的现有页面模块。运行ionic g component test后，我将自动生成的ComponentsModule导入到other.module.ts中，并将其添加到imports阵列中。

import { ComponentsModule } from "../../components/components.module"; 
@NgModule({ 
    declarations: [ 
    OtherPage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(OtherPage), 
    ComponentsModule, 

    ], 
}) 
export class OtherPageModule {}

然后我添加组件选择器到页面作为<test></test>。

这将导致一个错误：

polyfills.js:3 Unhandled Promise rejection: Template parse errors: 
'test' is not a known element: 
1. If 'test' is an Angular component, then verify that it is part of this module. 
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" 

<ion-content padding> 
[ERROR ->]<test> </test> 
</ion-content> 
"): ng:///AppModule/[email protected]:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: 
'test' is not a known element: 
1. If 'test' is an Angular component, then verify that it is part of this module.

这并不为我工作。我也尝试为测试组件创建一个module并以相同的方式导入它，但这不适用于我。

我似乎无法找到任何文档或示例。如何在Ionic 3中导入自定义组件？

来源

2017-08-01 fitzmode

您可以为您的整个代码？ –

请加入我的Ionic 3聊天室 - https://chat.stackoverflow.com/rooms/153499/ionic-3 –

您需要选择[Component]（https://angular.io/api/core/Directive#选择器）定义为“测试” – Efren

你需要做的是象下面这样：

import { ComponentsModule } from "../../components/components.module"; 
@NgModule({ 
    declarations: [ 
    OtherPage, 
    ComponentsModule, 
    ], 
    imports: [ 
    IonicPageModule.forChild(OtherPage), 

    ], 
    entryComponents: [ 
    ComponentsModule 
    ] 
}) 
export class OtherPageModule {}

来源

2017-08-01 16:29:12

我已经试过这个，但组件对应用程序还是未知 – fitzmode

您必须导出test组件。

@NgModule({ 
    declarations: [ 
    TestComponent, 
    ], 
    imports: [], 
    exports: [TestComponent] 
}) 
export class ComponentModule {}

来源

2017-08-01 16:40:05

该组件已经导出在components.module.ts- – fitzmode

-1

如这里https://github.com/ionic-team/ionic/issues/11560

表示遗憾的是有没有办法使延迟加载组件，指令，管。任何方式让我们知道，如果你管理它。

因此，您可以将您的ComponentsModule导入到您的page.module.ts中。这是我的。

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { ComponentsModule } from ../../components/components.module'; 

@NgModule({ 
    declarations: [ 
    WoDetailsPage, 

    ], 
    imports: [ 
    ComponentsModule, 
    IonicPageModule.forChild(WoDetailsPage), 
    ], 
}) 
export class WoDetailsPageModule {}

来源

2017-11-27 11:36:10 umki

一种方法是每个组件添加到您的app.module.ts文件，然后声明如下：

import { MyComp } from "../../components/my-comp/my-comp"; 
@NgModule({ 
    declarations: [ 
    OtherPage, 
    MyComp 
    ], 
    imports: [ 
    IonicPageModule.forChild(OtherPage) 
    ], 
}) 
export class OtherPageModule {}

来源

2018-03-08 21:42:11

离子3导入自定义组件

回答

相关问题