Angular 角度@ViewChild未加载路由器出口负载

我在下面的屏幕上有4个按钮，用来完成关于在组件之间传递数据的教程（）

我在@ViewChild部分遇到问题。在四个按钮下面有一个routerlink，它填充在每个按钮上，单击相关组件。

当我单击@ViewChild按钮时，组件显示，但消息没有填充，它是空的

当我第二次单击@ViewChild按钮时，消息按预期填充

我相信这不是@ViewChild的预期结果。因此，我需要知道它为什么要这样做，以及如何纠正它，使消息在第一次单击时可见

该教程说：“我们需要实现AfterViewInit生命周期挂钩，以接收来自孩子的数据”，我已经完成了这一步

下面是我的父代码和子代码

家长

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从'./child/child.component'导入{ChildComponent}；
@组成部分({
选择器：“应用程序数据视图子项”，
templateUrl:'./数据视图child.component.html'，
样式URL:['./数据视图子.component.scss']
})
导出类DataViewChildComponent实现AfterViewInit{
@ViewChild（ChildComponent，{static:false}）子对象；
构造函数（）{}
消息：字符串；
ngAfterViewInit（）{
this.message=this.child.message
}
}

儿童

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序子项”，
templateUrl:“./child.component.html”，
样式URL:['./child.component.scss']
})
导出类子组件{
消息='Hola Mundo！'；
构造函数（）{}
}

父模板

<div class="parent-card">
  <h1>I am the Parent component</h1>
  <h2 class="tac">Message: {{ message }}</h2>
  <app-child></app-child>
</div>

我是父组件
消息：{{Message}}

---

请让我知道第一次单击时该消息不可用的原因。

为此使用

激活
事件

父组件：

<div class="container">
  <router-outlet (activate)="onActivate($e)"></router-outlet>
</div>

onActivate(componentRef) {
  componentRef.myFunc();
}

myFunc() {
  console.log("my function");
}

这里的问题是违反单向数据流，这会阻止正确触发更改检测。单向数据流意味着在变更检测期间，数据需要在组件树上或下流动。实例化组件树是数据向下流动，但在实例化过程中试图从子级中提取数据意味着您将其向上拉违反了原则。Angular不允许这样做，因为它可能会创建一个无限的更改检测循环，其中父项触发子项，子项触发父项，等等

如果您在开发模式下运行，您将看到一个错误，如“选中后表达式已更改”。。。这意味着在您的父母变更检测周期内，您的孩子中的某些内容导致您的父母发生了变更

你可以做很多像这样的事情：

ngAfterViewInit() {
  setTimeout(() => {
    this.message = this.child.message;
  });
}

这将解决您的问题，因为超时将在父级中触发另一轮更改检测

但这里的问题是，您不应该尝试这样做，并且显示出糟糕的体系结构。数据应该是响应事件而不是实例化的

演示闪电战：。
父模板看起来像什么？现在将其添加到问题中。您是否在日志中看到类似“选中后表达式更改”的错误？控制台中没有显示错误。您是在开发模式还是生产模式下运行？在prod模式下，错误将被抑制。如果您愿意，您可以将angularfirebase置于眼睛和耳朵之上。路由器插座与此无关。更有可能是演示视频故意抑制错误。他们将在一天结束时销售一款产品。感谢您的回复，我将接受您的回答，也感谢您提醒我，无论您多么聪明，在编码帮助网站上，同情初学者始终是最重要的，一点“自我工作”来消除被困的负面情绪也不会有任何伤害。谢谢我在很多地方都看到了这一点，但是$e是未定义的