Angular2：交换子

Question

我试图交换使用ngIf像子：

<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？

任何想法？

Answer 1

当然不是最好的，但是这可能是一个更清洁的方式：

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>