如何在角度6組件中將API響應作為@Input參數傳遞

Question

我有“新”和“歷史”兩個組成部分。 歷史組件在“新”組件內部調用如下，

<div class="col-lg-12">
   <app-leave-history [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
</div>

上面是“新”組件。 我需要從“新”組件ts文件傳遞數據到'ldata'屬性。 當我使用API​​響應將數據傳遞給'ldata'時，組件不會獲取數據。 因為在API響應之前，歷史組件被加載。 我應該在歷史組件中調用API，還是有辦法從我的“新”組件調用API並傳遞給'ldata'？

Answer 1

您正在執行的方法是正確的，您在新組件中進行API調用並分配響應。

將響應作為輸入傳遞給新組件。 為了在收到數據后傳遞數據，您可以使用*ngIf渲染歷史記錄組件

<div class="col-lg-12">
   <app-leave-history *ngIf="ldata && permission" [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
 </div>

Answer 2

使用*ngIf等待API調用完成並初始化ldata 。 Angular將等待它，然后只渲染app-leave-history

 <div class="col-lg-12">
   <app-leave-history 
     *ngIf="ldata && permission" 
     [LeaveData]="ldata" 
     [RoleData]="permission">
   </app-leave-history>
</div>

建議：請考慮將ldata ， LeaveData和RoleData重命名為camelCase即lData （或leaveData更清晰）， leaveData和roleData 。 這是Angular StyleGuide建議的內容：

使用較低的駝峰案例來命名屬性和方法。

Answer 3

由於@SiddAjmera和@Sajeetharan建議添加* ngIf部分，另外我在ngOnChanges（）事件中分配了響應。 現在它有效!!!