状态的变化导致属性值的变化,这个时候我们就需要用到动态属性,ng中的动态属性用[]包裹即可
动态属性与事件语法
- 动态属性, 属性名用中括号包裹, 属性值用双引号包裹 =>
[contentEditable]="isFlag"
- 事件, 事件名用中括号包裹, 事件值用双引号包裹 =>
(click)="handleClick()"
, 事件名后面要加小括号进行调用,否则不生效
<div class="edit" [contentEditable]="isFlag"></div>
<button (click)="handleClick()">点击</button>
app.component.ts
export class UserListComponent {...isFlag = true;handleClick() {this.isFlag = !this.isFlag;alert("点击了");}
}
实现效果
就是这么简单!!