Angular - 如果我想在两个按钮被按下或其中一个按钮发生变化时发生某个动作，应该使用什么生命周期事件？

Question

假设我有6个按钮，3个在上面，3个在下面。3个在上面，3个在下面。

let valuesum;
let value1;
let value2;

let ButtonGroup1clicked= false;
let buttonGroup2Clicked= false;

function click1 (value){
value1= value;
console.log(value1);
ButtonGroup1clicked= true;
console.log(ButtonGroup1clicked);
};

function click2 (value){
value2= value;
console.log(value2);
buttonGroup2Clicked= true;
console.log(buttonGroup2Clicked);
};

function sumvalue(vaaalue1,vaaalue2){
console.log("SUM: ",vaaalue1+vaaalue2);
};


if(ButtonGroup1clicked===true && ButtonGroup2clicked===true){
 console.log(value1,value2);
sumvalue(value1, value2);
};


function runThis(){

if(ButtonGroup1clicked===true && buttonGroup2Clicked===true){
 console.log(value1,value2);
sumvalue(value1, value2);
};

};

<div>
    <button onclick = "click1(1),runThis()">1</button>
    <button onclick = "click1(2),runThis()">2</button>
    <button onclick = "click1(3),runThis()">3</button>
    </div>


    <div>
    <button onclick = "click2(4),runThis()">4</button>
    <button onclick = "click2(5),runThis()">5</button>
    <button onclick = "click2(6),runThis()">6</button>
    </div>

我想添加这个功能，如果顶部的一个按钮和底部的一个按钮被按下，在两个按钮都被按下后，如果我按下另一个按钮，比方说顶部的按钮，这个功能就会再次执行。

我知道怎么做，但我不知道如何在Angular上用类实现。以及使用什么生命周期事件。(ngOnChanges()...等等等等)

Answer 1

生命周期钩子在这里没有任何作用。你只需要将vanilla JS翻译成Typescript。这意味着在一个类的上下文中做一切事情。并替换 onclick 事件绑定 (click) 事件。

控制器

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  valuesum: any;
  value1: any;
  value2: any;

  ButtonGroup1clicked = false;
  buttonGroup2Clicked = false;

  public click1 (value){
    this.value1= value;
    console.log(this.value1);
    this.ButtonGroup1clicked= true;
    console.log(this.ButtonGroup1clicked);
  }

  public click2 (value){
    this.value2= value;
    console.log(this.value2);
    this.buttonGroup2Clicked= true;
    console.log(this.buttonGroup2Clicked);
  }

  public sumvalue(vaaalue1,vaaalue2){
    console.log("SUM: ",vaaalue1+vaaalue2);
  }

  public runThis() {
    if(this.ButtonGroup1clicked === true && this.buttonGroup2Clicked === true){
      console.log(this.value1, this.value2);
      this.sumvalue(this.value1, this.value2);
    }
  }
}

模板

<div>
  <button (click)="click1(1);runThis()">1</button>
  <button (click)="click1(2);runThis()">2</button>
  <button (click)="click1(3);runThis()">3</button>
</div>

<div>
  <button (click)="click2(4);runThis()">4</button>
  <button (click)="click2(5);runThis()">5</button>
  <button (click)="click2(6);runThis()">6</button>
</div>

工作实例。Stackblitz

如果你是Angular的新手，我建议你去看一下教程。此处. 它介绍了一些基础知识。