Angular6-初始化父级时如何初始化子级组件?

时间:2018-08-17 07:05:14

标签: angular parent-child angular6

Angular6相当新,也许您可​​以帮助我了解如何解决此问题。

我有一个包含多个标签的面板。 面板是父组件,每个选项卡是不同的子组件。 在其中一个子组件中,我订阅了一项服务,以检索用户列表,操作列表并将其显示在选项卡内容中。

一切正常,但是现在我在标签页眉中添加了一个垫子徽章图标,该图标显示一个数字。该数字由子组件给出,因为它是操作列表的数组长度。

当我从父母那里订阅孩子的操作列表时,要检索要在垫子徽章中显示的数字,问题是,当第一次打开面板时,仍然没有初始化具有该列表的孩子,直到其标签被点击, 因此我从父母那里进行的订阅不起作用,因为它返回的是未定义的。

对此必须有多种解决方案, 一种方法应该是一种方法,一旦我打开主面板,便可以初始化特定的选项卡子项,以便父项可以检索数据并将其放在选项卡标签中。

我应该使用哪个生命周期挂钩? 还是可以在打开父面板时仅初始化部分子代码?并非一切?

谢谢

1 个答案:

答案 0 :(得分:0)

您的问题出在您的体系结构中,在这种情况下,您应该将登录名移至系统的上层,或者如果需要,请移至服务中。

以任何方式保持现在的体系结构,可以使用ngClass,如下所示,因为ngClass与ng不同(如果浏览器仍在绘制和初始化组件)。

@Output() onChildInit: EventEmitter<any> = new EventEmitter<any>();

子组件完成处理并准备好数据后,

 this.onChildInit.emit(data);

在您的父组件处添加:

<ChildComponent [ngClass]="showChild?'':'hidden'"(onChildInit)="DataIsHere($event)"></ChildComponent>

您应确保已加载子组件,并且没有ngIf阻止其初始化。

您可以了解有关Angular事件发射器和@Output in here的更多信息 关于角寿命周期in here