シンプルなコンポーネント用のプレゼンテーションラッパー

Question

私は角2の初心者です。

私は現在、私のように私のAppComponentで使用しているので...

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

@Component({ 
    selector: 'my-button', 
    template: ` 
    <button md-button>{{buttonText}}</button> 
    `, 
}) 

export class MyButtonComponent { 

    buttonText: string; 

    constructor(){ 
     this.buttonText = 'abc' 
    } 
} 

のようなカスタムボタンコンポーネントがあります。これまでの

<my-button></my-button> 

とても良いです。ボタンには「abc」と表示されます。

<my-button>とボタンテキストを指定できる方法はありますか？私のような意味

<my-button newText='xyz'></my-button> 

この動作を構成する方法はありますか？私が見たすべての例は、子から親への（言い換えれば）変数の流れを示していますが、逆のことはありません。

ご協力いただければ幸いです。ありがとう。

Answer 1

Inputを使用すると、親コンポーネントの値を期待できます。あなたはbuttonTextプロパティの上にInputのデコレータを配置するだけです。

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

@Component({ 
    selector: 'my-button', 
    template: ` 
    <button md-button>{{buttonText}}</button> 
    `, 
}) 
export class MyButtonComponent { 

    @Input() buttonText: string; 

    constructor(){ 
    } 
}