Angular点击按钮无法调用ng-sidebar子组件切换侧边栏问题求助

问题核心是单向数据流被破坏+父子组件状态不同步，具体原因如下：

• 子组件中对ng-sidebar使用了双向绑定[(opened)]，但仅声明了@Input() opened输入属性，没有对应的输出事件同步状态给父组件
• [(opened)]等价于单向绑定加状态变更事件监听，ng-sidebar内部触发状态变更时会直接修改子组件的opened输入属性，违反Angular单向数据流规则，导致父组件的_opened和子组件的opened属性状态不一致，后续父组件修改_opened时无法触发子组件的状态更新。

按照以下步骤修改即可修复：

1. 修改子组件TS代码 #

新增openedChange输出事件，用于向父组件同步侧边栏状态：

import { Input, Output, EventEmitter } from '@angular/core';

export class SidebarComponent {
  @Input() opened: boolean;
  // 输出事件命名需遵循「输入属性名+Change」规则，才能支持Angular双向绑定语法
  @Output() openedChange = new EventEmitter<boolean>();
}

2. 修改子组件HTML代码 #

将ng-sidebar的双向绑定拆分为单向绑定加事件监听，状态变更时冒泡给父组件：

<ng-sidebar [opened]="opened" (openedChange)="openedChange.emit($event)" position="right">
  <ul>
    <li>菜单项</li>
    <li>菜单项</li>
    <li>菜单项</li>
  </ul>
</ng-sidebar>

3. 修改父组件HTML代码 #

将父组件传入子组件的opened属性改为双向绑定，自动同步父子状态：

<ng-sidebar-container style="height: 100vh;">
  <!-- 改成双向绑定语法 -->
  <app-sidebar [(opened)]="_opened"></app-sidebar>

  <!-- 页面内容 -->
  <div ng-sidebar-content>
    <button (click)="_toggleSidebar()">切换侧边栏</button>
  </div>
</ng-sidebar-container>

修改完成后点击父组件按钮即可正常控制侧边栏开关，同时侧边栏内部触发的关闭操作（点击蒙层、按ESC键）也会同步更新父组件的_opened状态，不会出现状态不一致的问题。

备注：如果你的业务场景仅允许父组件按钮控制开关、不需要支持侧边栏内部关闭操作，可以不用新增输出事件，直接将子组件模板中的[(opened)]改为[opened]="opened"即可。不过该方案下用户手动关闭侧边栏时父组件状态不会同步，会出现点击两次按钮才能再次打开的问题，不推荐使用。

内容的提问来源于stack exchange，提问作者user16907356