angular - 如何在 Angular 6 组件中将 API 响应作为 @Input 参数传递

Question

我有两个组件"new"和“历史”。 history 组件在"new"组件内部调用如下，

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

上面是"new"组件。我需要将数据从"new"组件 ts 文件传递​​到“ldata”属性。当我使用 API 响应将数据传递给“ldata”时，组件未获取数据。因为在 API 响应之前，历史组件被加载。我应该在历史组件中调用 API 还是有什么方法可以从我的"new"组件调用 API 并传递给“ldata”？

Answer 1

使用*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建议:

Do use lower camel case to name properties and methods.