ionic v3 中的自定义组件

Question

我想创建一个简单的组件并将其包含在页面中。我使用ionic g component my-header（ionic-cli v3 beta）创建了它，修复了 IonicPageModule 错误，然后添加到另一个页面。然后我得到这个错误：

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 文件夹中：

components/my-header/my-header.html

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

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

components/my-header/my-header.scss

my-header {}

components/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
  ],
...

pages/home/home.html

Answer 1

该线程的答案较晚，但我相信有更多的人可以使用从另一个角度解释的此信息。

在 Ionic 中，自定义角度组件被组织在一个名为 ComponentsModule 的单独模块下。当使用ionic generate component 生成第一个组件时，离子连同该组件一起生成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。 ionic generate 组件（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 2

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

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

Answer 3

澄清一下：我在许多页面（可重用组件）中使用自定义 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。 “ionic g component”命令不会生成最后一个文件（yourcomponentname.module.ts）。所以我做到了。

Answer 4

由于 ionic 3 支持延迟加载，因此您无需在应用中导入自定义组件。模块.ts 文件。相反，您可以将其导入特定页面的 module.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 5

您不必在 ngModule 中导入 MyHeaderComponent。

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

 imports: [
    MyHeaderComponentModule,
  ],

Answer 6

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

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

})