单击Angular2时更改按钮外观

是通过使用Angular的事件绑定和样式绑定来实现的。以下是一个完善且全面的答案：

在Angular2中，可以通过事件绑定和样式绑定来实现单击按钮时更改按钮外观的效果。

首先，需要在HTML模板中定义一个按钮，并绑定一个点击事件。可以使用(click)指令来绑定一个点击事件，并指定一个处理函数。例如：

<button (click)="changeAppearance()">点击我</button>

接下来，在组件的类中定义changeAppearance()方法，该方法会在按钮被点击时触发。在该方法中，可以通过修改组件的属性来改变按钮的外观。例如，可以定义一个名为buttonColor的属性，并在changeAppearance()方法中修改该属性的值：

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

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  buttonColor: string = 'red';

  changeAppearance() {
    this.buttonColor = 'blue';
  }
}

在上述代码中，初始时按钮的颜色为红色，当按钮被点击时，changeAppearance()方法会将buttonColor属性的值修改为蓝色。

最后，在HTML模板中使用样式绑定来根据buttonColor属性的值动态改变按钮的外观。可以使用[style.property]指令来绑定一个样式属性，并指定一个表达式作为属性的值。例如，可以使用以下代码来绑定按钮的背景颜色：

<button (click)="changeAppearance()" [style.backgroundColor]="buttonColor">点击我</button>

上述代码中，[style.backgroundColor]指令会根据buttonColor属性的值来动态改变按钮的背景颜色。

这样，当按钮被点击时，changeAppearance()方法会被触发，buttonColor属性的值会改变，从而导致按钮的外观发生变化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器（CVM）产品介绍。
• 腾讯云云函数（SCF）：无服务器计算服务，可让您在云端运行代码而无需管理服务器。适用于事件驱动型的应用程序和后端任务处理。了解更多信息，请访问腾讯云云函数（SCF）产品介绍。