如何根据选择器更改切换组件？(How can i toggle components based on selector change?)

如何根据选择器更改切换组件？(How can i toggle components based on selector change?)

我有一个选择器，允许用户更改他们选择的付款方式。 这称为一个名为PaymentComponent的组件，它“应该”监听父组件中Selector的更改，然后切换相应的支付方法组件（即WireTransferPayment，CheckPayment，CreditCardPayment），但现在不起作用。 事实上，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); } }

I have a selector that lets a user change their chosen payment method. That calls a component called PaymentComponent that is "supposed" to listen for the change in Selector in the parent component and then toggle the appropriate payment method component (i.e. WireTransferPayment, CheckPayment, CreditCardPayment) but right now that doesn't work. In fact, the PaymentComponent doesn't even register that the selector has changed. I'm still learning Angular2 so I realize I'm still missing something simple. Can someone point me in the right direction? My google foo is failing me right now.

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); } }

最满意答案

所以，我找到了解决方案， 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() { } }

So, I figured out the solution, NgChanges was what I needed.

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() { } }