Question

当前，我在将多个点击事件映射到一个方法时遇到问题。我目前隐含性如下，其工作正常，但我需要一种更好的方式来处理多个按钮请使用一种方法。对此有何帮助？

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个divs ...

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

我认为有两种可能的方法

首先：您可以通过在click事件上调用所需的变量来直接更改html中的值例如：-

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

秒：如果您想在ts中创建函数，请这样做例如：-

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

，您可以在ts中像html一样使用此功能：-

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

Answer 2

按钮是否为拨动开关？我问是因为实现就是这样。

您可以使用eval：

clickEvent(id) {
eval(`this.status${id} = !this.status${id};`)
}

PS：请注意，eval中的表达式在|``|内引用，而不是在普通|''|内。

Answer 3

您可以创建一个带有buttonId作为参数的事件处理程序，并使用切换大小写。在html (click)="clickEvent(1)"

中触发事件处理程序

.component.html

<button `(click)="clickEvent(1)"`>button1</button>
<button `(click)="clickEvent(2)"`>button2</button>

.component.ts

clickEvent(buttonId : Number){
  switch (buttonId){
    case 1 : {
     this.status1 = !this.status1;
     break;
   }
    case 2 : {
     this.status2 = !this.status2;
   }
   ...
}

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

3 个答案: