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

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

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

})

Answer 2

您不必在 ngModule 中导入 MyHeaderComponent。

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

 imports: [
    MyHeaderComponentModule,
  ],

Answer 3

由于ionic 3 支持延迟加载，因此您无需在应用中导入您的自定义组件。 module.ts 文件。相反，您可以将其导入特定页面的 module.ts 文件。例如：如果你想在你的主页中使用你的自定义组件，你可以将它导入你的主页。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 4

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

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

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。 "ionic g component " 命令不会生成最后一个文件 (yourcomponentname.module.ts)。所以我做到了。

Answer 6

线程的迟到答案，但我相信有更多人可以使用从另一个角度解释的这些信息。

在 Ionic 中，自定义 angular 组件组织在名为 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，就像任何其他 angular 模块一样，需要将 ComponentsModules 导入到 AppModule。 ionic generate component (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 {}

ionic v3 中的自定义组件

Custom component in ionic v3

ionic2

ionic3

angular