Question

我坚持将自定义组件导入Ionic 3中的页面。这在Ionic 2中相对微不足道，但我似乎无法在Ionic 3中使用它。

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

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

你需要像下面这样做：

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

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

Answer 2

您必须导出test组件。

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

Answer 3

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

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

Answer 4

这就是我解决它的方法：

假设您的 custom-component.ts 导出类i。

在 custom-component.module.ts 中导入相同内容，如下所示：

select ndnc.mobileno,ndnc.opstype,n.Destination_Code_Domestic_Format,n.circle from ndncincremental ndnc,numberingrange n where ndnc.mobileno like n.destination_code_domestic_format + '%' and n.circle='delhi' and ndnc.opstype='d'

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

您已成功将自定义组件（import { CustomComponent } from './custom-component'; @NgModule({ declarations: [ CustomComponent, ], imports: [ IonicPageModule.forChild(CustomComponent), ], exports : [ CustomComponent ] }) export class CustomComponentPageModule { }）导入页面（HelloWorldPage）。

Answer 5

在模块中成功使用CUSTOM_ELEMENTS_SCHEMA声明之后，这迫使您用“-”破折号命名选择器，因此我将必须使用类似以下内容：

<MyPlayer-comp></MyPlayer-comp>

我对这些框架中的驼峰式怪胎一无所知感到不高兴，即使它起作用并且ngc不再抱怨“ ...不是一个已知的元素...”。

我个人更喜欢使用相同的名称（类，选择器，文件等）

我恢复了以下内容，这是在为Web构建时正在进行延迟加载的工作。（离子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 6

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

像这样将组件导入home.ts文件中，
import { MyComponent } from '../../components/my/my';

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

将IonicPageModule导入components.module.ts文件中，在这里我们需要以这种模式导入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 {}

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

Answer 7

如果 myComponent.ts 是您的组件。

然后，您可以通过 ionic generate 命令删除生成的模块（如果您不使用延迟加载），然后将以下内容直接添加到app.module.ts

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

myComponent.ts 看起来像这样：

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

Ionic 3导入自定义组件

7 个答案: