angular屬性繫結繫結函式,插值表示式插函式,ngIf繫結函式
阿新 • • 發佈:2019-02-11
以前認為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的文件說的是:
繫結的是expression,但是computer()不是表示式吧!