在Angular2+中绑定函数

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular App';
  buttonText = 'Click Me';
  isButtonClicked = false;

  onButtonClick() {
    this.isButtonClicked = true;
    this.buttonText = 'Clicked!';
  }
}

<h1>{{ title }}</h1>
<button (click)="onButtonClick()">{{ buttonText }}</button>
<p *ngIf="isButtonClicked">Button has been clicked!</p>

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

@Component({
  // ...
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  async onButtonClick() {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.isButtonClicked = true;
    this.buttonText = 'Clicked!';
    this.cdr.detectChanges(); // 手动触发变更检测
  }
}