Question

https://stackblitz.com/edit/angular-communication-2-dg6wag?file=main.ts

在上面的示例中，side-bar.component.ts中的（click）=“ toggleSideBar（）”不会关闭侧边栏

有什么想法吗？

Answer 1

您有两个app-side-bar，因此即使隐藏了一个，也始终可见。在您的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>

Answer 2

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

  <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()"，第二个被隐藏了。当红色的发出此事件时，应用程序组件不会监听它。当您单击应用程序组件上的按钮时，它会设置两者均使用的标志，因此它们都将被隐藏或显示...

您可能只想要one sidebar，对吗？如果没有，请说明您要实现的目标...

角发射父子组件

2 个答案: