javascript - 为什么angular 2中的*ngIf总是在使用函数时执行？

Question

我正在尝试使用 angular 2 创建一个应用程序，并且在我的应用程序中有一个身份验证服务，我的 html 模板是这样的:

 <header>
    <div *ngIf="isLogin()"><a href="">profile</a></div>
    <div *ngIf="!isLogin()"><a href="">register</a></div>
    <div *ngIf="!isLogin()"><a href="">signin</a></div>
    </header>

**and this is my class :** 

@Component({
    selector: 'main-menu',
    templateUrl: '/client/tmpl/menu.html',
    directives: [ROUTER_DIRECTIVES]
})
export class Menu extends Ext {

    public items: any;

    constructor(private _util: UtilService, private _user: UserService) {
        super();


    }

    public isLogin() {

        console.log("test");  <==== my problem is here
        return this._user.authorized();

    }


}

我的功能总是在执行!(在我的身份验证服务中，我还有其他功能也在运行)!这是为了在 *ngif 中使用一个功能 ??!!!我担心我的资源，我想知道它是否有问题？

Answer 1

每次运行 Angulars 变更检测时，它都会评估所有绑定(bind)，因此会调用您的函数来检查 View 是否需要更新。

不鼓励在绑定(bind)中使用函数。要么将值分配给组件类的属性并绑定(bind)到该属性，要么使用可观察对象和 | async 管道通知 Angular 有关更改的值。

另一种选择是使用 ChangeDetectionStrategy.OnPush，其中 Angular 变化检测仅在输入值发生变化时运行。