Angular2:交换子
问题描述:
我试图交换使用ngIf
像子:Angular2:交换子
<div *ngIf="paymentListShow" payment-list></div>
<div *ngIf="paymentFormShow" payment-form></div>
所以,我的父组件旨在处理这些值:
swapComponent(componentName: string): void {
let paymentState = {
'paymentList': (that): void => {
that.paymentFormShow = false;
that.paymentListShow = true;
},
'paymentForm': (that): void => {
that.paymentListShow = false;
that.paymentFormShow = true;
}
};
paymentState[componentName](this);
}
它存在不存在任何更优雅交换子组件的方法?使用rxjs Observables?
任何想法?
答
当然不是最好的,但是这可能是一个更清洁的方式:
show = {
paymentList: true,
paymentForm: false
}
swapComponent(componentName: string): void {
for (const component in this.show) {
if (this.show.hasOwnProperty(component)) {
this.show[component] = (component === componentName) ? true : false;
}
}
}
与合并:
<div *ngIf="show.paymentList" payment-list></div>
<div *ngIf="show.paymentForm" payment-form></div>