web-dev-qa-db-fra.com

reliure angulaire 2 une fois

Dans l'angle 1, nous pourrions faire une liaison ponctuelle de la manière suivante: {{ ::myFunction() }}.

Dans angular 2 cela jette:

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>

Comment pouvons-nous faire une liaison obligatoire dans angular2?

javascriptangularangular2-template
30
Miquel

ChangeDetectionStrategy.CheckOnce est la solution à ce problème.

Quelques infos ici:

14
Miquel

J'ai trouvé la solution pour un temps contraignant dans angulaire 2 ici: https://github.com/angular/angular/issues/14033

J'ai créé cette directive: 

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

Et utilisé:

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

Par exemple:

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

Actuellement, vous ne pouvez pas effectuer de reliure ponctuelle avec Angular 2. Cependant, vous pouvez savoir quand votre reliure change et réinitialiser vos entrées. 

Angular 2 fournit le même cycle de vie OnChanges. Vous devez implémenter l'interface OnChanges pour obtenir les modifications. 

Voir l'exemple de code ci-dessous où je stocke la propriété liée aux données dans une variable privée lorsque OnInit est appelée.

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

Plus tard, lorsque d’autres modifications se produisent, je mets la valeur à son ancienne valeur lors des modifications.

Ce mécanisme fonctionne comme Liaison unique .

Solutions alternatives: Vous pouvez également utiliser une fonction de définition pour capturer les modifications.

5
Jigar

ChangeDetectionStrategy.CheckOnce est la solution à ce problème.

Ceci a été mis à jour pour OnPush voir aussi le commentaire dans le code:

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

Puisqu’une fois, une lecture/liaison n’est pas possible par défaut en mode angulaire, je pense qu’écrire une fonction de lecture publique va résoudre le problème.

Par exemple

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">

Cela fonctionnera parfaitement si la fonction getter est capable de répondre avant que le rendu du modèle ne soit effectué. Donc, l’initialisation de mynumber serait bien si elle était faite dans la fonction ngOnInit ()

0
Abdeali Chandanwala