Ionic 3导入自定义组件

Question

我坚持将自定义组件导入Ionic 3中的页面。这在Ionic 2中相对微不足道，但我似乎无法在Ionic 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/OtherPage.html@16: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中导入自定义组件？

Answer 1

如此处所示https://github.com/ionic-team/ionic/issues/11560

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

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

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 {}

Answer 2

这就是我解决它的方式：

1. 假设，您的custom-component.ts导出类CustomComponent。
2. 在custom-component.module.ts中导入相同内容，如下所示：

   import { CustomComponent } from './custom-component';
   
   @NgModule({
     declarations: [
       CustomComponent,
     ],
     imports: [
       IonicPageModule.forChild(CustomComponent),
     ],
     exports : [ CustomComponent ]
   })
   export class CustomComponentPageModule { }

3. 现在，在您想要的页面中导入自定义组件，如下所示：

   import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';
   
   @NgModule({
     declarations: [
       HelloWorldPage,
     ],
     imports: [
       IonicPageModule.forChild(HelloWorldPage),
       CustomComponentPageModule,
     ]
   })
   export class HelloWorldPageModule {}

您已成功将自定义组件（CustomComponent）导入页面（HelloWorldPage）。

Answer 3

你需要像下面这样做：

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

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

Answer 4

您必须导出test组件。

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

Answer 5

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

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

Answer 6

在我的模块中成功使用CUSTOM_ELEMENTS_SCHEMA声明并强制您使用“ - ”破折号命名您的选择器后，我将不得不使用类似的东西：

<MyPlayer-comp></MyPlayer-comp>

我对这些框架骆驼式怪胎的完全无意义感到不满，尽管它起作用并且ngc不再抱怨“......不是一个已知元素......”。

我个人更喜欢将所有内容命名为相同的（类，选择器，文件等...）

在我为网络构建时，我恢复了以下使用延迟加载的方法。 （离子cordova构建浏览器--prod --release）

您的自定义组件模块声明：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { MyPlayerComp } from './MyPlayerComp ';
//
@NgModule({
    declarations: [MyPlayerComp ],
    imports: [IonicPageModule.forChild(MyPlayerComp )],
    exports: [MyPlayerComp ],
})
export class MyPlayerCompModule { }

在要使用自定义组件的模块中，使用以下命令：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { PlyrView } from './PlyrView';
//
import { MyPlayerCompModule } from './MyPlayerComp.module' // 20180720
//
@NgModule({
    declarations: [PlyrView],
    imports: [
        IonicPageModule.forChild(PlyrView),
        MyPlayerCompModule,                      // <<<<<
    ],                
    exports: [PlyrView],
})
export class PlyrViewModule { }

我希望这可以帮助别人

Answer 7

这是我通过以下链接解决它的方式： http://evalogical.com/blog/components-ionic-framework-3

1. 像这样导入home.ts文件中的组件， import { MyComponent } from '../../components/my/my';
2. 在home.module.ts中导入ComponentsModule并将其添加到导入中，就像这样。

   import { NgModule } from '@angular/core';  
   import { IonicPageModule } from 'ionic-angular';  
   import { HomePage } from './home';  
   import { ComponentsModule } from '../../components/components.module';  
   @NgModule({  
   declarations: [  
   HomePage,  
   ],  
   imports: [  
   IonicPageModule.forChild(HomePage),  
   ComponentsModule  
   ],  
   })  
   export class HomePageModule {}

3. 在components.module.ts文件中导入IonicPageModule，在这里我们需要在这样的模式中导入CUSTOM_ELEMENTS_SCHEMA。

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
   import { MyComponent } from './my/my';  
   import { IonicPageModule } from 'ionic-angular';  
   @NgModule({  
   declarations: [MyComponent],  
   imports: [IonicPageModule.forChild(MyComponent)],  
   exports: [MyComponent],  
   schemas: [CUSTOM_ELEMENTS_SCHEMA]  
   })  
   export class ComponentsModule {}  

4. 删除该行 来自import { HomePage } from '../pages/home/home';文件的app.module.ts而是添加以下行import { HomePageModule } from '../pages/home/home.module';
5. 现在，您可以将组件的选择器用作home.html文件中的html标记