Angular2+组件通信

Question

我有两个组件，OrderListComponent 和 OrderDetailComponent。 OrderDetailComponent 有两个输入为 @Input() order: Order; 和 @Input() isHidden: boolean;

我在OrderListComponent 的模板中列出了许多订单，每当单击“详细信息”按钮时，我通过发送单击的订单对象和isHidden 变量为假来激活OrderDetailComponent。（每个订单都有“详细信息”按钮）

“order-list.component.html”模板相关代码如下：

<div [hidden]="!isDetailsClicked">
    <app-order-detail [order]="clickedOrder" [isHidden]="!isDetailsClicked"></app-order-detail>
</div>

OrderDetailComponent 的模板如下：

<div [hidden]="isHidden" *ngIf="order">
<h2>{{ order.productName}} Order Details</h2>
<div>
    <span>id: </span>{{order.orderID}}
</div>
<div>
    <label>order id: <input [(ngModel)]="order.orderID"
        placeholder="orderID" [readOnly]="true"/>
    </label>
    <label>product name: <input [(ngModel)]="order.productName"
        placeholder="productName" [readOnly]="true"/>
    </label>
    <label>amount: <input [(ngModel)]="order.numberOfProduct"
        placeholder="numberOfProduct" [readOnly]="true"/>
    </label>
    <label>orderer: <input [(ngModel)]="order.orderer"
        placeholder="orderer" [readOnly]="true"/>
    </label>
    <label>status: <input [(ngModel)]="order.status"
        placeholder="status"/>
    </label>
</div>
<button (click)="goBack()">go back</button>
<button (click)="updateOrder()">save</button>

当我点击“保存”按钮时，我隐藏了OrderDetailComponent。

当第一次在OrderListComponent 的模板中单击“详细信息”按钮时，OrderDetailComponent 将按预期使用正确的参数激活。但是保存订单后，即使点击“详情”按钮，我也无法激活OrderDetailComponent。

我发现这很有趣，因为我正在向OrderDetailComponent 发送参数，并且它在第一时间就可以正常工作。但是对“详细信息”按钮的新点击无法再次激活OrderDetailComponent。

我该如何解决这个问题？谢谢。

编辑： 这里是“updateOrder”函数：

updateOrder(): void {
this.orderService.updateOrder(this.order).subscribe(() => this.goBack());
this.isHidden =  true;

}

Answer 1

我认为你的问题是，一旦 isDetailsClicked 设置为 true，它就不会被设置回 false，我会将该部分更改为如下所示：

<div *ngIf = "isDetailsClicked">
    <app-order-detail [order]="clickedOrder" [isHidden]="!isDetailsClicked"></app-order-detail>
</div>