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