Presentational Wrapper für einfache Komponenten

Question

Ich bin ein eckiger 2 Anfänger.

Im Moment habe ich eine Komponente benutzerdefinierte Schaltfläche wie so ...

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

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

export class MyButtonComponent { 

    buttonText: string; 

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

, die ich in meinem AppComponent als mit:

<my-button></my-button> 

so weit so gut. Der Knopf sagt "abc".

Gibt es eine Möglichkeit, den Button Text, wo ich sage <my-button> sagen kann? Ich meine wie

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

Gibt es eine Möglichkeit, dieses Verhalten zu konfigurieren? Alle Beispiele, die ich gesehen habe, zeigen den Fluss von Variablen vom Kind zum Elternteil (sozusagen), aber nie umgekehrt.

Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Sie könnten Input verwenden, um Wert von der übergeordneten Komponente zu erwarten. Sie müssen nur Input Dekorateur über buttonText Eigentum platzieren.

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

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

    @Input() buttonText: string; 

    constructor(){ 
    } 
}