web-dev-qa-db-ja.com

ionic v3のカスタムコンポーネント

単純なコンポーネントを作成して、ページに含めたいと思いました。 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

angularionic2ionic3
22
Andreas Gassmann

MyHeaderComponentをngModuleにインポートする必要はありません。

これを使用するページモジュールでMyHeaderComponentModuleをインポートする必要があります。

 imports: [
    MyHeaderComponentModule,
  ],
18
Suraj Rao

ionic 3は遅延読み込みをサポートしているため、アプリにカスタムコンポーネントをインポートする必要はありません。 module.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ファイルからインポートと宣言を削除することを忘れないでください。

31
Sid Puttur

スレッドに対する最新の回答ですが、別の観点で説明されているこの情報を使用できる人がもっといると確信しています。

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コンポーネント（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 {}
2
Aragorn

これが私のモジュールです。あなたの質問に答えるのに役立つことを願っています：

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

明確にするために、私は多くのページ（再利用可能なコンポーネント）でカスタム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には、ts、css、html、yourcomponentname.module.tsの4つのファイルがあります。 「ionic g component」コマンドは、最後のファイル（yourcomponentname.module.ts）を生成しません。だから私はやった。

0
suanter