Javascript 角度发射父子组件

在上述示例中，side-bar.component.ts中的click=toggleSideBar不会关闭侧栏

有什么想法吗？

您有两个应用程序侧栏，所以即使其中一个被隐藏，也始终可见。在app.component.html中尝试此功能

<div class="container">
  app component
  <br>
  <br>

  <app-side-bar [isOpen]="sideBarIsOpened" (toggle)="toggleSideBar()"></app-side-bar>

  <br>
  <br>

  <button (click)="toggleSideBar()">Toggle sidebar from app component</button>
</div>

---

html中有两个侧边栏实例。想象一下，这段代码是您的代码，添加了每个元素的样式：

  <app-side-bar 
    [isOpen]="sideBarIsOpened" 
    (toggle)="toggleSideBar()" 
    style="background-color: blue"></app-side-bar>
  <app-side-bar 
    [isOpen]="sideBarIsOpened"
    style="background-color: red"></app-side-bar>

你只能看到红色的，第二个。这是因为它们的位置相同，并且稍后会出现在html中。问题是第一个工具条上只有click=toggleSideBar，而第二个工具条则隐藏了它。当红色组件发出此事件时，应用程序组件没有侦听它。当您单击应用程序组件上的按钮时，它会设置它们使用的标志，因此它们都会隐藏或显示

---

你可能只想要，对吧？如果没有，请解释您试图实现的目标…

您链接的站点中不存在该代码。不要在单独的站点上链接到您的代码。把问题的完整样本直接放在问题中。这就是为什么在编辑器中有用于可运行代码段和格式化代码块的工具的原因。它没有。它没有。你正在链接到你问题中的整个项目。你不能说是的，然后链接到一个完全不同的文件。如果你甚至不能投入足够的精力在你的问题中加入你的问题代码，这里没有人会帮助你