角度模板通信一个滴答延迟

Question

我一直在玩ng-template,发现自己正在努力解决某些问题.

我在stackblitz中创建了一个简单的例子.https://stackblitz.com/edit/angular-template-series-v?file=app%2Fparent%2Fparent1.component.ts

一个父组件发送你好组件的儿童通过模板.

我们的想法是使用ngIf控制Child的模板 .

当Hello组件到达ngOnInit挂钩循环时,它会发出输出.父组件获取此输出并添加要显示的消息.

但是,创建组件时不会显示该消息,而是在一个循环之后显示.在该示例中,您需要单击"切换内容"按钮两次,才能显示"模板已创建"消息.

如何解决这个问题才能使消息出现在同一个循环中？

Answer 1

这是由于 Angular 中更改检测的工作方式所致。它没有链接到 using ng-template，正如这个修改后的 stackblitz显示的那样（使用孙子而不使用 ng-template ）。

关于变更检测需要了解的两件事：

• 它在事件（点击、提交等）、xhr 请求或计时器之后触发。
• 它从组件树的顶部到底部发生

基本上，当您单击切换按钮时：

• 处理程序被触发（showContent在您的示例中切换 的值，但没有其他内容。在此阶段未hello创建组件）
• 变化检测开始，总是从上到下开始。
• Angular 首先检查父组件的视图是否需要更新。由于尚未发生任何更改，因此父视图不会更新。
• 然后子组件检测到它showContentValue已经改变。这会导致组件的创建hello。
• 组件初始化后hello，created将发出事件。父组件收到此事件并相应地更新消息数组。但此时父视图的内容已经被检查过，因此 Angular 不会对父视图进行任何修改。

当您再次单击切换按钮时，则会再次运行相同的循环，这次将显示上一个循环中推送到数组中的消息

这是一个修改后的 stackblitz 示例，其中包含生命周期挂钩的日志

笔记

强制再次运行更改检测将解决您的问题，但是如果您不直接从子级到父级进行通信，则最好使用共享服务（基于可观察量）在不相关的组件之间广播消息