Question

我已经在主要组件中设计了路由器：

<div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

在app-navbar中有一个search box，并且搜索结果显示在路由器出口的某个组件上。问题是我不知道如何将数据从navbar组件传递到路由器出口。

我什至尝试导入该组件，但路由器出口无法自动刷新布尔值已更改。

Answer 1

一个选择是建立服务。 [我在原始答案中提供了其他几个选项...但是它被主持人删除了，所以我将其他选项保留为空。]

我进行了一次堆栈式闪电演示，演示了如何使用服务在此特定场景中：https://stackblitz.com/edit/angular-simpleservice-deborahk

注意：它不需要Subject或订阅

它提供了一个类似于您的<app-navbar></app-navbar>的“标题”组件，并带有一个搜索框。还有一个<router-outlet>，其中包含显示搜索结果的组件。（尽管我的特定示例仅显示了搜索文字...可以很容易地扩展为使用该搜索文字来显示搜索结果。）

希望对您有帮助！