路由器外部（组件）外部的角度2访问标签答案

【问题标题】：angular 2 access tags outside router-outer (components)路由器外部（组件）外部的角度2访问标签
【发布时间】：2017-03-09 21:07:10
【问题描述】：

在我的 Angular 2 项目中，当应用程序加载并显示第一个组件时，我可以单击固定按钮以显示菜单。但是，如果我转到另一条路线并尝试单击按钮，则什么也没有发生。问题是，按钮点击事件在 jquery 文件中描述，我在组件初始化后加载它 - $.getScript('assets/js/app.js', function(){});因为我正在将 jquery 网站移植到 angular。我的导航栏标签放置在路由器外部的上方，视图上方。这可能是原因吗？在视图页面更改后，我感觉父 DOM 不可见。

应用结构：

<navbar></navbar>
    <router-outlet></router-outlet>
<pageFooter></pageFooter>

主页组件：

ngAfterViewInit() {
...
      $.getScript('assets/js/app.js', function(){});
}

我也尝试过直接从子级操作和导航栏，使用 jQuery 来简单地添加类，但没有发生。

有什么建议吗？

【问题讨论】：

父 DOM 对孩子不可见

标签： angular angular2-routing

【解决方案1】：

您需要创建一个“服务”来在子组件和父组件之间进行通信。

我在这里回答了一个类似的问题： Angular 2 - Using RXJS Observables

如果您需要任何帮助，请在 cmets 中询问 :)

【讨论】：

但接下来的问题是，如何服务会改变视图之外的 DOM？或者服务如何在导航栏组件中调用 toggleMenu 函数？
您的“routeroutlet”组件中会发生某种事件，这些事件需要传播到导航栏所在的父组件。为此，您使用该服务。调用BroadcastService的announceBoradcast()，在parent中订阅broadcastAnnounce$。
你可以扩展这个相当容易使用的对象，或者你需要通知父组件的内容。
您只需订阅服务broadcastAnnounce$，当您调用announceBoradcast("Hello world")时，每个订阅者都会收到该事件..
你可以阅读一下如何使用 rxjs。 youtube.com/watch?v=ZmEvKLYF0os

【解决方案2】：

基本上，现在，我通过将导航栏标签放在组件视图中来解决它。我知道它不是最好的解决方案，需要在每个组件中放置导航栏标签，但它可以工作。但希望有更好的方法。我不知道如何使用服务来让我的导航栏组件操作 DOM。

【讨论】：

操作 DOM 的不是服务，它是父组件。但是您需要一个服务来将事件从孩子传达给父母。

【解决方案3】：

如果你在编译时就知道组件（标签）的类型，你可以直接注入它：

constructor(private navBar:NavBarComponent) {}

这会注入该类型最近的祖先组件。

【讨论】：