Ionic2カスタムコンポーネントの使用



Use Ionic2 Custom Components



Ionicの便利な点は、イオンヘッダー、イオンコンテンツなどの一連のコンポーネントを提供することです。Ionic2自体のコンポーネントがプロジェクトのニーズを満たすことができない場合は、コンポーネントをカスタマイズする必要があります。

1.コマンドを使用してカスタムコンポーネントテンプレートを生成します

イオン性g成分myComponent



新しいプロジェクトを作成する手順は、ここでは省略されています。わからない方は前回の記事をご覧ください。 ionic-cliは、カスタムコンポーネントテンプレート「ionicg component YourComponentName」の生成など、多くの便利な操作を提供します。ここで、gは生成されます。

同様のコマンドは次のとおりです。



ionic g page YourPageName //新しいページを作成する
ionicgディレクティブYourPageName //ディレクティブの作成
ionic g component YourComponentName //コンポーネントを作成します
ionicgプロバイダーYourProviderName //サービスを作成する
ionic g pipe YourPipeName //フィルターを作成する

2.コンポーネントテンプレートの概要

新しく作成されたコンポーネントテンプレートは、「src / components」にあります。コンポーネントの構造は、html、ts、およびscssで構成されるPageの構造と似ています。コンポーネントがapp.module.tsで宣言された後、プロジェクトで使用できます。

  • my-component.html



     1
    <div クラス=「赤いテキスト」> {{テキスト}}div>>
  • my-component.scss

     1 2 3 4 5
     my-component {。ネット-テキスト{{ネット}}
  • my-component.ts

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
    インポート{コンポーネント}から '@ angular / core'@成分({セレクタ「my-component」templateUrl'my-component.html'})書き出す クラス MyComponentComponent {テキスト:文字列ビルダー(){この.text =「私の最初のコンポーネント」}}

残りのページで次のコードを使用します。

 1
 

3.コンポーネント通信の@入力

コンポーネントを再利用する場合、さまざまな場所でさまざまな効果を実現する必要があります。その後、「@ Input」を導入できます。簡単に言うと、「@ Input」は親コンポーネントからデータを取得し、それを現在のコンポーネントに入力します。

注:サブページのtsファイル(つまりコンポーネント内)で、importは2つのキーワードを導入します:import {Component、Input、Output、EventEmitter} from '@ angular / core'

簡単な例

  • my-component.html

     1
    <div クラス=「赤いテキスト」> {{data}}からのメッセージdiv>>
  • my-component.scss

     1 2 3 4 5
     my-component {。ネット-テキスト{{ネット}}
  • my-component.ts

     1 2 3 4 5 6 7 8 9 10 11 12
    インポート{コンポーネント、入力}から'@ angular / core' @成分({セレクタ:「my-component」、templateUrl:'my-component.html'}) 書き出すクラス MyComponentComponent {{@入力('データ')。 データ: ストリングビルダー(){}}
  • home.htmlに追加

     1
    <ぼくの-コンポーネントデータ=「ホームページ」>>ぼくの-コンポーネント>
  • about.htmlを追加します

     1
    <ぼくの-コンポーネントデータ=「AboutPage」>>ぼくの-コンポーネント>

効果は以下の通りです
ホームページ

4.コンポーネント通信の@出力

簡単に言うと、「@ Output」は現在のコンポーネントからデータを取得し、それを親コンポーネントに出力します。

例の変更を続け、コンポーネントにクリックイベントを追加すると、クリックするとコンポーネントが配置されているページがポップアップ表示されます。

  • my-component.html

     1
    <div クラス=「赤いテキスト」(クリック)=「MCClick()」> {{data}}からのメッセージdiv>>
  • my-component.scss

     1 2 3 4 5
     my-component {。ネット-テキスト{{ネット}}
  • my-component.ts

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
    インポート{コンポーネント、入力、出力、EventEmitter}から'@ angular / core' @成分({セレクタ:「my-component」、templateUrl:'my-component.html'}) 書き出すクラス MyComponentComponent {{@入力('データ')。 データ: ストリング@出力()parentClick = new EventEmitter()ビルダー(){} MCClick(){この.parentClick.emit({from:このデータ})}}
  • home.htmlに追加

     1
    <ぼくの-コンポーネントデータ=「ホームページ」(parentClick)='onClick($ event)'>>ぼくの-コンポーネント>
  • about.htmlを追加します

     1
    <ぼくの-コンポーネントデータ=「AboutPage」(parentClick)='onClick($ event)'>>ぼくの-コンポーネント>
  • 次のメソッドをhome.ts&about.tsに追加します。

     1 2 3
    onClick(です){alert(e.from)}

効果は以下の通りです
ホームページ

この記事は、カスタムコンポーネントの使用法と、親コンポーネントとの相互作用についての簡単な紹介です。実際のプロジェクトはもっと複雑かもしれませんが、それらは常に同じです。技術の蓄積により、より充実した機能を備えたコンポーネントが誰もが作れると思います。