セレクタの変更に基づいてコンポーネントを切り替えるにはどうすればよいですか？

Question

私は、ユーザーが選択した支払い方法を変更できるセレクターを持っています。これは、親コンポーネントのSelectorの変更をリッスンし、適切な支払いメソッドコンポーネント（WireTransferPayment、CheckPayment、CreditCardPayment）を切り替えるようになっているが、今は動作しないPaymentComponentというコンポーネントを呼び出す。実際、PaymentComponentはセレクタが変更されたことを登録しません。私はまだAngular2を学んでいるので、私はまだ何か単純なものが欠けていることに気づきます。誰かが私を正しい方向に向けることができますか？私のgoogle fooは今、私に失敗しています。

PARENT COMPONENT 

@Component { 
    template: ' 
    <select (change)="onPaymentTypeChange($event.target.value)" class="form-control" id="paymentType" required> 
     <option value="" disabled selected hidden>select payment type to begin</option> 
     <option value="pmtCreditCard">Credit Card</option> 
     <option value="pmtCheck">Check</option> 
     <option value="pmtWire">Wire Transfer</option> 
    </select> 
    <app-payment [paymentTypeSelector]="paymentType"></app-payment> 
    ' 
} 
export class ParentComponent { 
    onPaymentTypeChange(selectorValue) { 
    console.log('paymentType ', this.paymentType); 
    console.log('selectorValue ', selectorValue); 
    this.paymentType = selectorValue; 
    } 
} 


CHILD COMPONENT 

@Component { 
    inputs: [ 'paymentTypeSelector' ], 
} 

export class PaymentComponent implements OnInit { 

    paymentTypeSelector: string; 
    displayCheck = 'none'; 
    displayWire = 'none'; 

    constructor() { 
    console.log('paymentTypeSelected', this.paymentTypeSelector); 
    } 

    ngOnInit() { 
    console.log('here: ', this.paymentTypeSelector); 
    this.togglePaymentDisplay(this.paymentTypeSelector) 
    } 

    togglePaymentDisplay(paymentType) { 
    console.log('paymentTypeSelected', paymentType); 
    } 

} 

Answer 1

だから、私は解決策を考え出し、NgChangesは私が必要なものでした。

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

@Component({ 
    moduleId: module.id, 
    selector: 'app-payment', 
    templateUrl: 'payment.component.html', 
    styleUrls: ['payment.component.css'], 
    directives: [ 
    CheckPaymentComponent, 
    WireTransferPaymentComponent 
    ], 
}) 
export class PaymentComponent implements OnInit, OnChanges { 

    @Input() name: string; 
    changeLog: string[] = []; 

    ngOnChanges(changes: {[propkey: string]: SimpleChange}) { 
    let log: string[] = []; 
    console.log('log ', log); 
    for (let propName in changes) { 
     console.log('propName ', propName); 
     let changedProp = changes[propName]; 
     let from = JSON.stringify(changedProp.previousValue); 
     let to = JSON.stringify(changedProp.currentValue); 
     log.push(`${propName} changed from ${from} to ${to}`); 
    } 
    this.changeLog.push(log.join(', ')); 
    } 

    constructor() { 
    } 

    ngOnInit() { 

    } 
}