Angular2：*ngIf 的一次性绑定可用吗？答案

【问题标题】：Angular2: Is one time binding for *ngIf available?Angular2：*ngIf 的一次性绑定可用吗？
【发布时间】：2017-08-20 05:36:17
【问题描述】：

我正在创建一个 DOM 结构，并且只想在第一次在某些可视组件中添加一些部分，并且不希望它们一次又一次地刷新，这是 *ngIf 的工作方式。这是为了避免绑定一次又一次地执行，因为我知道一旦创建就永远不会改变。换句话说，Angular1 有 :: 运算符来帮助实现这一点。

Angular2 中是否有一次性绑定*ngIf？如果在其他问题中讨论过这个问题，请指出我的问题。

【问题讨论】：

*ngIf 不会刷新，如果值没有变化则再次刷新。不，Angular2+ 中没有一次性绑定
感谢您的评论。这是我的错，我的意思是优化绑定。
也许你正在绑定一个方法或getter。这通常不是一个好主意。而是从某个生命周期回调或事件处理程序中调用方法或 getter，并将其分配给一个字段并绑定到该字段。与方法相比，变化检测对字段的工作效率更高。

标签： angular angular2-directives

【解决方案1】：

您可以创建自己的结构指令，该指令将在初始页面加载时评估传递的表达式，并根据传递条件的值在 DOM 中显示或不显示模板，如下所示：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[customNgIf]' })
export class CustomNgIfDirective {

    @Input("customNgIf") condition: boolean;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef) {
    }

    ngOnInit() {
        if (condition) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();
        }
    }
}

你会这样使用它：

<div *customNgIf="expression">
    Test
</div>

【讨论】：