Angular 如何制作在单击时在div之间切换的按钮？

我正在尝试创建一个按钮，在按下时将div切换为不可见或可见。但是，该按钮不起作用。我想这可能是因为按钮位于目标组件之外的另一个组件中，但我真的不知道

带有按钮html的切换栏：

<div class="container-fluid">
     <div class="row toggleBar">
          <button (click)="isDisplay" class="btn btn-toggleBtn">  Keyboard View</button>
        </div>
</div>

应用程序组件html文件：

<div class="container-fluid">
  <div class="row">
    <div class="col-12" style="padding-left: unset; padding-right: unset;">
      <app-header></app-header>
    </div>
  </div>
    <div class="row"> 
      <div class="col-8">
          <app-toggle-bar></app-toggle-bar>
          <div [hidden]="isDisplay" class="touchView">
            <app-touch-view></app-touch-view>
          </div>
          
      </div>
      
      <div class="col-4  checkout">
        <app-checkout></app-checkout>
      </div>
    </div>
</div>

您需要在子组件中设置一个以将事件发送到父组件。然后可以将其绑定到父元素中，以设置其他元素的显示状态

试试下面的方法

子组件

export class ToggleBarComponent implements OnInit {
 isDisplay = false;

 @Output() showHide: EventEmitter<boolean> = new EventEmitter();

 toggleDisplay(){
  this.isDisplay = !this.isDisplay;
  this.showHide.emit(this.isDisplay)
 }
 constructor() { }

 ngOnInit(): void {
 }

}

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
@组成部分({
选择器：“应用程序切换栏”，
templateUrl:'./toggle bar.component.html'，
样式URL:['./切换栏.component.css']
})
导出类ToggleBarComponent实现OnInit{
isDisplay=true；
@Output（）display=neweventemitter（）；
构造函数（）{}
ngOnInit（）：void{
}
}

子模板

键盘视图

父组件

export class ToggleBarComponent implements OnInit {
 isDisplay = false;

 @Output() showHide: EventEmitter<boolean> = new EventEmitter();

 toggleDisplay(){
  this.isDisplay = !this.isDisplay;
  this.showHide.emit(this.isDisplay)
 }
 constructor() { }

 ngOnInit(): void {
 }

}

导出类AppComponent实现OnInit{
isDisplay=true；//您需要输出切换栏组件显示状态以获取其在应用程序组件中的值，您当前的实现缺少该部分，
isDisplay
toggle value未在应用程序中触发其始终是其在应用程序中设置的默认值

切换杆组件

export class ToggleBarComponent implements OnInit {
 isDisplay = false;

 @Output() showHide: EventEmitter<boolean> = new EventEmitter();

 toggleDisplay(){
  this.isDisplay = !this.isDisplay;
  this.showHide.emit(this.isDisplay)
 }
 constructor() { }

 ngOnInit(): void {
 }

}

希望这能奏效

onShowHide(value) {
 this.isDisplay = value
}