Jquery 角度2：在应用程序'上显示/隐藏div；来自不同组件的主模板

我有一个Angular 2应用程序，包含几个组件：

- app
  - sidebar-panel
  - main-panel
     - obj-container (1)
     - obj-container (2)
     - (etc)
  - footer-panel

基本上，我希望以友好方式显示/隐藏页脚面板：

• 当我双击“obj容器”中的任何对象时，它都应该是可见的。我想从每个“obj容器”组件代码中的角度“dblclick”事件的处理程序中执行此操作
• 在HTML模板中，页脚面板应该有一个关闭按钮来隐藏它
• 如果两个显示/隐藏动作都有一个类似于jÇuery“slideToggle”方法的动画效果，那就太好了

在“应用程序”组件的模板中，页脚面板的插入方式如下：

<div class="cell medium-3 footer" id="footerPanel">
  <app-footer-panel></app-footer-panel>
</div>

目前，我认为唯一可以做到这一点的方法是在“app”组件上创建一个变量，并在footer div中绑定一个*ngIf，根据其值隐藏或显示它。并且，在每个“obj容器”组件上，创建一个@Output事件，该事件在用户每次单击关闭按钮时触发，并由父“应用”组件捕获以修改div可见性

但是，我认为这个解决方案太复杂了，而且我错过了jQuery动画效果（虽然不是必需的，但我想知道我是否可以得到它）

---

有什么想法吗？谢谢，

您已经在使用*ngIf的过程中取得了良好的效果。您可以使用*ngIf显示和隐藏页脚。比如：

<footer *ngIf="showFooter"></footer>

并切换dblclick上的showFooter值单击其他组件的按钮和页脚关闭按钮。要将其从父组件传递到页脚（子）组件，请查看角度源。提示：@Input（）是您需要的。

---

对于动画，Angular提供了您所需要的一切：

谢谢您的回答，但是通信应该在子组件（obj容器）与父组件（应用程序）之间进行，父组件具有页脚div。我试图将div封装在组件中，但我只得到一个没有内容的空白div。也许基础框架不喜欢DIV内部角度选择器…关于动画模块，我快速浏览了一下，我认为这正是我需要的，谢谢！对于从子级到父级的通信，您需要使用@Output和event-emitter来阻止更改的父级。