javascript - Angular 2+一次性绑定(bind)

Question

在 Angular 1 中，我们可以这样进行一次绑定(bind):{{::myFunction() }}。

在 Angular 2 中，这是抛出:

EXCEPTION: Template parse errors:
Parser Error: Unexpected token : at column 2 in [{{ ::consent(false, undefined, box) }}] in CookieConsent@5:29 ("ull-right" href="" (click)="consent(true, $event, box)">De acuerdo</a>
        <span class="hidden">[ERROR ->]{{ ::consent(false, undefined, box) }}</span>

我们如何在 angular2 中进行一次性绑定(bind)？

Answer 1

我在这里找到了 Angular 2 一次性绑定(bind)的解决方案: https://github.com/angular/angular/issues/14033

我创建了这个指令:

 import { Directive, TemplateRef, ViewContainerRef, NgZone } from "@angular/core";

@Directive({
    selector: '[oneTime]',
})
export class OneTimeDirective {
    constructor(template: TemplateRef<any>, container: ViewContainerRef, zone: NgZone) {
        zone.runOutsideAngular(() => {
            const view = container.createEmbeddedView(template);
            setTimeout(() => view.detach());
        })
    }
}

并使用它:

  <some-selector *oneTime [somePropertyToOneTimeBinding]="someValueToOneTimeBinding"></some-selector>

例如:

     <iframe *oneTime [src]="myUrl"></iframe>