선택기 변경을 기반으로 구성 요소를 토글 할 수 있습니까?

Question

나는 사용자가 선택한 지불 방법을 변경할 수있는 선택기가 있습니다. 그러면 상위 구성 요소에서 Selector의 변경 사항을 수신 한 다음 적절한 결제 수단 구성 요소 (예 : WireTransferPayment, CheckPayment, CreditCayPayment)를 전환하지만 현재는 작동하지 않는 것으로 간주되는 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() { 

    } 
}