我正在构建Angular 7应用程序，并且具有一个基本的应用程序布局，该布局包含顶部的Header菜单，左侧的Navigation菜单，中部的视口以及可选的“ Panel”视图，这些视图将捕捉到视图中在某些事件中。该面板旨在为上下文信息留出空间，作为对主视图端口的“预留”。
材料设计有自己的组件，称为Sheet，但我正在尝试构建自己的组件。但是，我开始遇到数据绑定问题，我认为这是因为组件之间无法正确通信。我的应用层次结构是这样的：
App -> Header
-> Navigation
-> Viewport
-> (most of the application goes in here)
-> Panel
然后，我有一个“ PanelManager”服务，可用来在应用程序内的任何位置（在“视口”下）管理面板（打开/关闭面板）。由于Panel组件位于根App组件下，因此我确定可以在其中进行输入绑定并提供有关显示内容的信息，因此我将App组件设置为具有@ViewChild属性，该属性为我的PanelComponent提供了句柄。然后，我使用PanelManager订阅“主题”事件，该事件将检查事件是“打开”还是“关闭”，并在@ViewChild组件上调用正确的方法。
现在，“视口”内部的任何组件都可以注入PanelManager并调用“ open（title，model，component）”（打开（标题，模型，组件）），这将使用“ title”（打开的“模型”）打开面板组件和要在面板中显示的组件“ component”。
我的问题是，当此“模型”在我的视口中某处更新时，在与面板交互并导致摘要循环发生之前，面板不会更新。
由于这种行为，我知道“模型”是内存中的正确对象，它只是更改检测无法正常工作。我尝试使用ChangeDetectionRef来强制检测，但是由于我认为我在错误的组件内调用它而无法正常工作。
我主要想知道这是否是从我的应用程序中的任何地方与直接位于App组件下方的高级面板进行通信的最佳方法，或者是否有更好的方法可以解决数据绑定问题
例如你会怎么做？