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

Posted 2023-03-13

【中文标题】Angular6 - 初始化父组件时如何初始化子组件？

【英文标题】：Angular6 - How to initialize child component when parent is initialized?

【发布时间】：2019-01-24 04:20:22

【问题描述】：

对 Angular6 很陌生，也许你可以帮助我了解如何解决这个问题。

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

一切正常，但现在我在选项卡标题中添加了一个 mat-badge 图标，它显示一个数字。该数字由子组件给出，因为它是操作列表的数组长度。

当我从父级订阅子级的操纵列表以检索要在 mat-badge 中显示的数字时，问题是，当面板第一次打开时，拥有该列表的子级仍未初始化，直到它的标签被点击， 所以我从父母那里做的订阅不起作用，因为它返回未定义。

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

我应该使用什么生命周期挂钩？ 或者是否可以在打开父面板时只初始化一部分子代码？而不是全部？

谢谢

【问题讨论】：

如我所见，您可以向孩子添加和@output 或将资源移动到更高级别，如果您可以编辑您的问题并添加您现在是如何实现它的，它将更多有帮助

我不能把它移到父级，因为每个选项卡（每个子组件）都有不同的功能和不同的订阅来检索数据，所以对于大多数人来说订阅触发很好只有当孩子被初始化时，但在这个单一的情况下，因为我需要孩子的数据作为标签标签中的 mat-badge，所以我只需要在父初始化后立即来自孩子的那条数据

【参考方案1】：

您的问题出在您的架构中，在这种情况下，您应该将登录信息移到系统的上层或需要它的服务中。

如果你必须保持现在的架构，你可以使用 ngClass 如下，因为 ngClass 不像 ngIf 浏览器仍在绘制和初始化组件。

@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

【讨论】：

但这能解决我的问题吗？据我了解，在这种情况下 这部分只会在数据准备好时才被初始化？但是在我切换到孩子的选项卡并触发其组件中的 ngOnInit 部分之前，数据不会准备好？我需要的是父级，能够在子组件初始化之前访问子组件中的一些数据，因此一旦父组件也被初始化，就以某种方式初始化这部分数据

我编辑了我的答案，查看 标签中的更新

谢谢，但据我所知，这对我来说似乎不是正确的方式，当数据准备好时，你基本上是从孩子身上发出的，基于此，你显示或者把 隐藏在父组件的html文件中，但这意味着子组件必须初始化，而我需要的是父组件一初始化就从子组件传来的数据！我想也许我可以在子组件中放入一个生命周期钩子，这使得这部分代码与父组件一起初始化！如果没有这样的事情，那么我应该将所有内容都移到服务中

是的，在你的情况下，我认为服务是要走的路。你可以看看生命周期钩子。 angular.io/guide/lifecycle-hooks