如何制作一个在单击时在 div 之间切换的按钮？答案

【问题标题】：How to make a button that toggles between divs when clicked?如何制作一个在单击时在 div 之间切换的按钮？
【发布时间】：2020-12-21 18:20:46
【问题描述】：

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

带有按钮 html 的切换栏：

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

切换栏 ts 文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-toggle-bar',
  templateUrl: './toggle-bar.component.html',
  styleUrls: ['./toggle-bar.component.css']
})
export class ToggleBarComponent implements OnInit {
  isDisplay = false;
  
  toggleDisplay(){
    this.isDisplay = !this.isDisplay;
  }
  constructor() { }

  ngOnInit(): void {
  }

}

应用组件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>

【问题讨论】：

标签： angular

【解决方案1】：

您需要输出切换栏组件的显示状态以在应用组件中获取其值，您当前的实现缺少该部分，isDisplay 切换值不会在应用中触发，它始终是应用中设置的默认值。

切换栏组件

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 {
 }

}

在应用模板中添加输出方法以获取发射值

  <div class="col-8">
      <app-toggle-bar (showHide)=onShowHide($event)></app-toggle-bar>
      <div [hidden]="isDisplay" class="touchView">
        <app-touch-view></app-touch-view>
      </div>
  </div>

在应用程序组件中通过切换栏组件发出的输出显示状态。

onShowHide(value) {
 this.isDisplay = value
}

希望这行得通。

【讨论】：

【解决方案2】：

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

试试下面的

子组件

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

@Component({
  selector: 'app-toggle-bar',
  templateUrl: './toggle-bar.component.html',
  styleUrls: ['./toggle-bar.component.css']
})
export class ToggleBarComponent implements OnInit {
  isDisplay = true;
  @Output() display = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit(): void {
  }
}

子模板

<div class="container-fluid">
  <div class="row toggleBar">
    <!-- toggle boolean flag and emit in `click` handler -->
    <button (click)="isDisplay=!isDisplay;display.emit(isDisplay)" class="btn btn-toggleBtn">  
      Keyboard View
    </button>
  </div>
</div>

父组件

export class AppComponent implements OnInit {
  isDisplay = true;       // <-- default value (hidden)
  ...
}

父模板

<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">
      <!-- assign the event (`true` or `false`) in the event handler -->
      <app-toggle-bar (display)="isDisplay=$event"></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>

【讨论】：