web-dev-qa-db-ja.com

angular 2ワンタイムバインディング

angular 1では、{{ ::myFunction() }}のように1回だけバインドできます。

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>

Angle2で1回のバインドを行うにはどうすればよいですか？

javascriptangularangular2-template
36
Miquel

ChangeDetectionStrategy.CheckOnceは、この問題の解決策です。

ここにいくつかの情報：

13
Miquel

angular 2 here： https://github.com/angular/angular/issues/140 で1回のバインディングの解決策を見つけました。

このディレクティブを作成しました：

 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>
13
m e

現在、Angular 2を使用して1回限りのバインディングを行うことはできません。ただし、バインディングがいつ変更され、入力がリセットされるかはわかります。

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;
    }
  }
}

後で他の変更が発生すると、その後の変更で値を古い値に設定します。

このメカニズムはOne-time bindingのように機能します。

代替ソリューション：セッター機能を使用して変更をキャプチャすることもできます。

5
Jigar

ChangeDetectionStrategy.CheckOnceは、この問題の解決策です。

これはOnPushに更新されました。コード内のコメントも参照してください。

export declare enum ChangeDetectionStrategy {
    /**
     * `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
     */
    OnPush = 0,
    /**
     * `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
     */
    Default = 1,
}
3
eav

デフォルトでは、角度で一度の読み取り/バインドは不可能なので、パブリックgetter関数を記述すると問題が解決すると思います。

例えば

public getValue():number {
 return mynumber ? mynumber : 25; // if mynumber is not undefined the mynumber else return 25
}

//In html template
<input type="range" min="getValue()" max="100">

これは、テンプレートのレンダリングが行われる前にgetter関数が応答できる場合に完全に機能します。そのため、ngOnInit（）関数でmynumberの初期化が素晴らしい

0
Abdeali Chandanwala