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（或{{1} }，leaveData和leaveData。 Angular StyleGuide建议：

请使用小写的驼峰名称来命名属性和方法。

Answer 3

由于@SiddAjmera和@Sajeetharan建议* ngIf添加了一部分，另外我在ngOnChanges（）事件中分配了响应。现在可以了！！！

如何在角度6组件中将API响应作为@Input参数传递

3 个答案: