web-dev-qa-db-ja.com

Ionic 3：コンポーネントの追加方法

私がする時：

_ionic generate component my-component
_

このフォルダ構造が作成されました：

_components
    my-component
        my-component.ts
        my-component.scss
        my-component.html

    components.module.ts
_

このコンポーネントをページで使用したい。 Ionic 3で新しい遅延読み込みメカニズムを使用するつもりはありませんが、使用してもかまいません。最も簡単に機能するものは何でも、コンポーネントを使用したいだけです。ちなみに、私のページにはそれ自体のモジュールはありません。これはページのフォルダー構造です。

_pages
    somepage
        somepage.ts
        somepage.scss
        somepage.html
_

次にコンポーネントに戻ります。テンプレートでカスタムionicコンポーネント（イオングリッド）を使用します。したがって、_my-component.html_は次のようになります。

_<ion-grid></ion-grid>
_

その行はVSコードで赤で強調表示されます。エラーは次のようになります。

_'ion-grid' is not a known element:
1. If 'ion-grid' is an Angular component, then verify that it is part of this module.
2. If 'ion-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
_

これは、IonicModuleとCommonModuleを_components.module.ts_に追加することにより、100件の投稿と質問に従って解決する必要があります。

_@NgModule({
    declarations: [MyComponent],
    imports: [
        CommonModule ,
        IonicModule
    ],
    exports: [MyComponent]
})
export class ComponentsModule {}
_

しかし、もちろんこれはエラーを解決しません。

2番目の問題は、ページが新しいカスタム要素を認識しないことです。 _somepage.html_のこの行：

_<my-component></my-component>
_

同様に赤で強調表示され、このエラーが表示されます：

_'my-component' is not a known element:
1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
_

最初はComponentsモジュールを_app.module.ts_に追加しなければなりませんでした：

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

しかし、これは何も解決しませんでした。大量の投稿を2時間読んだ後、私は恐ろしい_components.module.ts_が遅延読み込み用であることを理解し、ページのモジュールを追加する必要があるため、あきらめて、コンポーネントを直接_app.module.ts_：

_@NgModule({
  declarations: [
    MyApp,
    SomePage,
    MyComponent
  ],
  imports: [
    ...
    MyComponent
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    SomePage
  ],
  providers: [...]
})
export class AppModule {}   
_

他の組み合わせも試しましたが、何もうまくいきませんでした。神々のために、これはAngularで行うのが最も簡単なことであり、Ionicも同様に簡単でした。2. Angularでコンポーネントを使用するには、いったい何をする必要がありますか3？

angulartypescriptionic-frameworkcomponentsionic3
8
Mister Smith

ようやく両方の問題を解決しました。

問題＃1：アプリがコンポーネントを認識できるようにする方法：

  1. components.module.tsを削除します。次にコンポーネントを生成するときは、ionicがこのファイルを再度作成しないようにするフラグを使用します。

    ionic generate component mycomponent --no-module

  2. コンポーネントを手動でapp.module.tsに追加します。declarationsの内側のみ：

    @NgModule({
    declarations: [
        MyApp,
        SomePage,
        MyComponent
    ],
    ...
})
export class AppModule {}
  3. これで、任意のページテンプレート内で使用できます。

問題＃2：使用方法Ionicコンポーネントテンプレート内のコンポーネント：

特別なことをする必要はありません。それらを使用してください。コンポーネントをapp.module.tsに追加する前にいくつかのエラーが発生しましたが、Visual Studio Codeは[問題]タブからエラーを削除していませんでした。しかし、アプリは機能しました。 VS Codeを再起動したところ、エラーは表示されなくなりました。どうやらこれはVS Codeの既知の問題で、古いエラーを取り除くために再起動する必要があるようです。

12
Mister Smith

component.module.tsファイルを削除して、コンポーネントをapp.module.tsにインポートするだけです。

import { CircularTabs } from "../components/circular-tabs/circular-tabs";


@NgModule({
declarations: [
MyApp,
.
.
CircularTabs
]

このコンポーネントを使用するページに、次のように@ ViewChildを追加します

import { CircularTabs } from "../../components/circular-tabs/circular-tabs";

export class MainPage {
@ViewChild("myTabs") myTabs: Tabs;
@ViewChild("myCircularTabs") circularTabs: CircularTabs;

それでおしまい！コンポーネントが機能します。うまくいけば、それはあなたを助けます。

2
Mustafa Lokhandwala

これを考慮してください（Ionic 3）。コンポーネント（私の場合は「EditComponent」）をページモジュールに配置します。

@NgModule({
  declarations: [
    EstabProfilePage,
    EditComponent
  ],

そして、すべてが正常に動作します。

enter image description here

1
Willian De Castro

app.module.tsにComponentsModuleをインポートするだけです

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

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule
    ...
  ],
  ...
0
moazzem

以下のファイルのように、「somepage.module.ts」と呼ばれる、pages/somepage内に新しいファイルを作成する必要があります。

import { NgModule } from '@angular/core';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
declarations: [
],
imports: [
    ComponentsModule
],
})
export class SomePageModule {}`
0
hesam rajaei