离子 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

这就是我解决它的方式：

1. 假设您的自定义组件.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 2

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

不幸的是，没有办法制作延迟加载组件、指令、管道。 无论如何，如果您管理它，请告诉我们。

因此，您可以在页面中导入组件模块。这是我的。

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 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 不再抱怨"......不是已知元素..."。

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

我恢复到以下内容，即在为网络构建时使用延迟加载。(Ionic Cordova Build Browser --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. 从app.module.ts文件中删除行
   import { HomePage } from '../pages/home/home';，改为添加以下行import { HomePageModule } from '../pages/home/home.module';

5. 现在，您可以将组件的选择器用作home.html文件中的 html 标记

Answer 8

如果myComponent.ts是你的组件。

然后你可以通过命令ionic generate删除生成的模块(如果你不使用延迟加载(，并直接在 app.module.ts 中添加以下内容

@NgModule({
declarations: [
MyComponent,
]
entryComponents: [
MyComponent
] });

myComponent.ts看起来像这样：

@Component({
selector: 'app-sheduler',
templateUrl: 'sheduler.html'
})
export class ShedulerComponent {}