angular入门基础教程(四）动态属性与事件

状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可

动态属性与事件语法

• 动态属性, 属性名用中括号包裹, 属性值用双引号包裹 => [contentEditable]="isFlag"
• 事件, 事件名用中括号包裹, 事件值用双引号包裹 => (click)="handleClick()", 事件名后面要加小括号进行调用，否则不生效

<div class="edit" [contentEditable]="isFlag"></div>
<button (click)="handleClick()">点击</button>
1
2

app.component.ts

export class UserListComponent {
  ...
  isFlag = true;
  handleClick() {
    this.isFlag = !this.isFlag;
    alert("点击了");
  }
}
1
2
3
4
5
6
7
8

实现效果

就是这么简单！！