ionic2 コンポーネントにテンプレートのタグ(セレクタ)からパラメータを渡したい

2017年01月21日

  1. TOP
  2. BLOG
  3. angular2
  4. ionic2 コンポーネントにテンプレートのタグ(セレクタ)からパラメータを渡したい

ionic2はangular2ベースでコンポーネント志向です。
そのため共通箇所は全てパーツとしてコンポーネント化するのですが、例えば見出し部分をコンポーネント化した時、
それを呼び出す親のコンポーネントから見出しのコンポーネントに対して見出しのラベルを渡す必要があります。

まず親のコンポーネントがこれ 

<ion-header>
  <page-title></page-title>
</ion-header>
<ion-content padding>

</ion-content>

そして子のコンポーネントがこちら

<h1>タイトル</h1>

子のコンポーネントであるpage-titleに対してパラメータを渡して、『タイトル』のラベルを変更させたいのですが、これをテンプレート内で解決したい。

解決方法

出来るかの可否については『可能』でした。
ただ少しめんどくさい・・・・
まずは親のテンプレートはこのように

<ion-header>
  <page-title title="見出し！"></page-title>
</ion-header>
<ion-content padding>

</ion-content>

タグにパラメータを記述しただけですね。これで親は終わり。
続いて子のテンプレートは以下の通り

<h1>{{title}}</h1>

ここまでは簡単そう！だけどこれでは動かない！！
なので次に子のtsファイルを開いてimportの部分をこのように変更

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

さらにクラスの部分に『@Input() title;』を記述

export class TitlePage {

  @Input() title;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
}

これで動く！
詳しい説明？俺がして欲しい！

関連ページ