离子V3中的自定义组件

Question

我想创建一个简单的组件并将其包含在页面上。我使用ionic g component my-header(Ionic-CLI V3 Beta(创建它，修复了IonicCageModule错误，然后添加到另一个页面。然后，我得到这个错误：

Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

" myheaderComponent"已自动添加到@ngmodule声明中。

感谢您的帮助。

编辑：

该组件位于我的components文件夹中：

组件/my-header/my-header.html

<div>
  {{text}}
</div>

组件/my-header/my-header.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';
@NgModule({
  declarations: [
    MyHeaderComponent,
   ],
  imports: [
    IonicModule,
  ],
  exports: [
    MyHeaderComponent
  ],
  entryComponents:[
    MyHeaderComponent
  ]
})
export class MyHeaderComponentModule {}

组件/my-header/my-header.scss

my-header {}

组件/my-header/my-header.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-header',
  templateUrl: 'my-header.html'
})
export class MyHeaderComponent {
  text: string;
  constructor() {
    console.log('Hello MyHeaderComponent Component');
     this.text = 'Hello World';
  }
}

app/app.module.ts

/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';
@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

页/home/home.html

Answer 1

由于离子3支持懒惰加载，因此您无需在应用程序中导入自定义组件。模块。TS文件。相反，您可以在特定页面的模块中导入它。例如：如果要在主页中使用自定义组件，则可以在您的home.module.ts文件中导入：

：

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

但是，不要忘记从app.module.ts文件中删除您的导入和声明，该文件会在创建自定义组件时自动添加。

Answer 2

您不必在ngmodule中导入 MyHeaderComponent。

您应该在要使用此的页面模块中导入MyHeaderComponentModule。

 imports: [
    MyHeaderComponentModule,
  ],

Answer 3

该线程的后期答案，但我敢肯定，还有更多的人可以在另一个角度使用此信息。

在离子中，自定义角度组件是在称为ComponentsModule的单独模块下组织的。当使用ionic generate component和组件一起生成第一个组件时，Ionic会生成ComponentsModule。任何后续的组件都会添加到同一模块中，正确。

这是一个示例ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[
      ]
})
export class ComponentsModule {}

与其他任何角模块一样，要在应用中使用ComponentsModule，则需要将ComponentsModules导入到AppModule中。离子生成的组件(V 4.12(不添加此步骤，因此必须手动添加。

AppModule的摘录：

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Answer 4

您必须在模块中导入组件。确保您还导出该组件。

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]
})

Answer 5

只是为了澄清：我在许多页面(可重复使用的组件(中使用了一个自定义navigatorComponent。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';
@NgModule({
  declarations: [
    TestPage,
  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
   TestPage,
  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

注意：NavigatorComponent有4个文件：TS，CSS，HTML和YourComponentName.module.ts。"离子G组件"命令不会生成最后一个文件(yourcomponentname.module.ts(。所以我做到了。

Answer 6

这是我的模块。希望它能帮助您回答您的问题：

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})