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

【问题标题】：How to pass API response as @Input parameter in angular 6 component如何在 Angular 6 组件中将 API 响应作为 @Input 参数传递
【发布时间】：2019-02-23 07:20:07
【问题描述】：

我有两个组成部分，即“新”和“历史”。历史组件在“新”组件中被调用如下，

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

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

【问题讨论】：

你为什么删除答案？
我在下面添加了答案。

标签： angular api angular6

【解决方案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 和@987654333 @。这是Angular StyleGuide 建议的：

请使用小写字母来命名属性和方法。

【讨论】：

感谢@SiddAjmera 的建议

【解决方案2】：

正如@SiddAjmera 和@Sajeetharan 建议添加的 *ngIf 部分，另外我在 ngOnChanges() 事件中分配了响应。现在可以了！！！

【讨论】：

【解决方案3】：

您正在做的方法是正确的，您在新组件中进行 API 调用并分配响应。

将响应作为输入传递给新组件。为了在收到数据后传递数据，您可以使用 *ngIf 呈现历史组件

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

【讨论】：