web-dev-qa-db-ja.com

Ionic 4つのカスタムコンポーネント

コマンドionic g component myComponentを実行した後、どのようにしてionic 4にコンポーネントをロードしますか？生成された新しいカスタムコンポーネントをホームページに追加したい。

angulartypescriptionic-frameworkionic4
29
Yushin

最後にこれを理解しました、これが動作する再現です：

ionic start myProject blank --type=angular
ionic g module components
ionic g component components/myComponent --export

これにより、宣言とエクスポートの両方が「myComponent」のコンポーネントモジュールに追加されます。

コンポーネントを使用するには、ページモジュールのComponentsModuleにimportsを追加するだけです。

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
        {
            path: '',
            component: HomePage
        }
    ])
],
declarations: [HomePage]
})
export class HomePageModule { }

この方法では、app.module.tsに何も追加されません。

また、独自のカスタムコンポーネントで任意のコンポーネントを使用する場合は、components.module.tsのIonicModuleにimportsを追加する必要があります。

お役に立てれば ：-）

31
Steffen

これは、components> foot-card> foot-card.tsのセレクターです。

import { Component } from '@angular/core';

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

  constructor() {
    console.log('Hello FootCardComponent Component');
    this.text = 'Hello World';
  }

}

これはcomponents.module.tsです：

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

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

export class ComponentsModule {}

これはapp.module.tsです：

import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [

  ],
  imports: [
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FootCardComponent
  ],
  providers: [
  ]
})
export class AppModule {}

Importでcomponent-moduleをインポートし、app.module.tsのエントリコンポーネントでcomponent-nameを宣言する必要があります。

Components.module.tsでは、コンポーネントを宣言してエクスポートする必要がありますが、IonicModuleをインポートすることを忘れないでください。

同じ問題に直面していましたが、Components.module.tsとapp.module.tsにIonicModuleをインポートするように指示された人はいません。entryComponentに追加してcomponentModuleをインポートするだけです。

11
user8531037

基本的に、ionic g component myComponentはapp.module.tsを更新し、appフォルダー内にコンポーネントを作成します。

しかし、よりエレガントな方法でコンポーネントを追加したい場合。手順は次のとおりです。

ionic g module components

componentsというモジュールフォルダーを生成します。次に、コンポーネントの束を生成します。

ionic g component components/myComponent --export
ionic g component components/myComponent2 --export
ionic g component components/myComponent3 --export
ionic g component components/myComponent4 --export

Components.module.tsの内部は次のように記述できます。

...
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { MyComponentComponent } from './my-component/my-component.component';
import { MyComponentComponent2 } from './my-component2/my-component2.component';
import { MyComponentComponent3 } from './my-component3/my-component3.component';
import { MyComponentComponent4 } from './my-component4/my-component4.component';

const PAGES_COMPONENTS = [
  MyComponentComponent,
  MyComponentComponent2,
  MyComponentComponent3,
  MyComponentComponent4
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
  ],
  declarations: [
    PAGES_COMPONENTS
  ],
  exports: [
    PAGES_COMPONENTS
  ],
  entryComponents: [],
})
export class ComponentsModule {}

そして、必ずapp.module.ts内にコンポーネントモジュールをインポートしてください：

...
import { ComponentsModule } from './components/components.module';
...

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    ComponentsModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

コンポーネントをテストするには、ページまたはコンポーネントを再度作成する必要があります。

ionic g page testing

テストコンポーネント/ページにコンポーネントモジュールをインポートするか、（同様に現在のホームページに）：

...
import { ComponentsModule } from '../components/components.module';
...

@NgModule({
  imports: [
     ...
     ComponentsModule,
     ...
  ],
  declarations: [TestingPage]
})
export class TestingPageModule {}

最後に、コンポーネントセレクタを使用して、テストページ内にコンポーネントを記述します。例えば.

<app-my-component></app-my-component>
<app-my-component2></app-my-component>
<app-my-component3></app-my-component>
<app-my-component4></app-my-component>

これが役立つことを願っています。

8
Snow Bases

上記のすべてを行った後...

home.page.htmlでしか機能しませんでしたappコンポーネントの名前の前に次のように追加します：

<app-my-component></app-my-component>
3
Inês Gomes

重要なのは、カスタムコンポーネント専用の新しいモジュールを含めることです。

コマンド「ionic generate component components/myComponent --export」がこの旧式モジュールを作成しなくなった理由がわかりません。私はこれと同じ ここの問題 を経験しました。

1
Silvair L. Soares