angular - 将多个点击事件映射到一个方法

Question

目前我在将多个点击事件映射到一个方法时遇到了问题。我目前 implimentation 如下所示，它工作正常，但我需要一种更好的方法来处理多个按钮 使用一种方法。有人可以帮助解决这个问题吗？

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

@Component({
  selector: 'app-draggable',
  templateUrl: './draggable.component.html',
  styleUrls: ['./draggable.component.scss']
})
export class AppComponent implements OnInit {

  status1: boolean = false;
  status2: boolean = false;
  status3: boolean = false;
  status4: boolean = false;
  status5: boolean = false;
  status6: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  clickEvent1() {
    this.status1 = !this.status1;
  }
  clickEvent2() {
    this.status2 = !this.status2;
  }
  clickEvent3() {
    this.status3 = !this.status3;
  }
  clickEvent4() {
    this.status4 = !this.status4;
  }
  clickEvent5() {
    this.status5 = !this.status5;
  }
  clickEvent6() {
    this.status6 = !this.status6;
  }
}

需要减少 ts 文件和模板文件中的方法和变量定义量。 div 标签也可以动态添加，最多 10 个 div...

app.component.html

  <div class="container-fluid">
      <div class="row grid">
          <div class="col-md-4 my-3 grid__widget-holder"
               (click)="clickEvent1()"  
               [ngClass]="status1 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
              <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 1
                            <button class="float-right" type="button">
                                    <i class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent2()"  
          [ngClass]="status2 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 2
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                            </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent3()"  
          [ngClass]="status3 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 3
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent4()"  
          [ngClass]="status4 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 4
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent5()"  
          [ngClass]="status5 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 5
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>

              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent6()"  
          [ngClass]="status6 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
          <div class="card widget">
                      <div class="card-header widget__header">
                          <h5 class="card-title">Widget 6
                          <button class="float-right" type="button">
                              <i  class="fa fa-bandcamp">
                              </i>
                          </button>
                        </h5>
                      </div>
                      <div class="card-body widget__body">
                          Content
                      </div>
                      <div class="card-footer widget__footer">
                          Footer
                      </div>
                  </div>
              </div>
      </div>
  </div>

Answer 1

我认为有两种可能的方法

首先:你可以通过点击事件调用所需的变量直接改变html中的值 例如:-

(click)="this.status1 = !this.status1"

第二:如果你想在 ts 中创建函数，那么就这样做 例如:-

clickEvent(status): boolean {
    return !status;
  }

你可以像在 html 中一样在 ts 中使用你的这个函数:-

(click)="status1 = clickEvent(status1)"
(click)="status2 = clickEvent(status2)"