以前认为angular属性绑定的时候只能绑定属性,官网上也没说能绑定函数,看同事代码的时候被惊呆了,可以绑定函数,而不仅仅是属性,可以绑定函数,而不仅仅是属性,可以绑定函数,而不仅仅是属性,整理一下相关的用法。没想到angular里面还可以这样。
import {Component} from '@angular/core';
@Component({
templateUrl: './function.component.html'
})
export class FunctionComponent {
k = 0;
constructor() {
this.kGo();
}
computer() {
console.log('computer....');
return this.k > 10;
}
getK() {
return this.k;
}
kGo() {
setInterval(() => this.k++, 1000);
}
getImage() {
return this.k % 2 ? './assets/1.png' : './assets/2.png';
}
}
模板是:
<section>
<img [src]="getImage()">
<h1>i am function:{{getK()+''}}</h1>
<h1>i am property:{{k}}</h1>
<div *ngIf="computer();else jjj;"></div>
<ng-template #jjj>i am j</ng-template>
</section>
我原本以为*ngIf=”computer()函数调用一次就计算出是否显示了就可以了,没想到他不断的再计算。angular的文档说的是:
https://angular.cn/guide/template-syntax#binding-syntax-an-overview
绑定的是expression,但是computer()不是表达式吧!