角度2一次装订

Question

在角度1中,我们可以用这种方式进行一次绑定:{{ ::myFunction() }}.

在角度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中进行一次绑定？

Answer 1

ChangeDetectionStrategy.CheckOnce 是这个问题的解决方案.

一些信息在这里:

• http://www.syntaxsuccess.com/viewarticle/change-detection-in-angular-2.0

• https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

Answer 2

我在这里找到了以角度2进行一次绑定的解决方案: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>

Answer 3

目前,您无法使用Angular 2进行一次性绑定.但是,您可以知道绑定何时更改并重置输入.

Angular 2提供OnChanges生命周期钩子.您需要实现OnChanges接口才能获得更改.

请参阅下面的代码示例,我在调用OnInit时将数据绑定属性存储在私有变量中.

export class Footer implements OnInit, OnChanges {
  @Input() public name: string;
  private privname: string;

  constructor() { }

  ngOnInit() {
    this.privname = this.name;
  }


  ngOnChanges(changes: { [key: string]: SimpleChange }): void {
    if (!changes["name"].isFirstChange()) {
        this.name = this.privname;
    }
  }
}

稍后当发生其他更改时,我会在后续更改中将值设置为旧值.

这种机制就像一次性绑定一样.

替代解决方案:您还可以使用setter函数捕获更改.