Подтвердить что ты не робот

Angular 2 однократная привязка

В angular 1 мы можем сделать однократное связывание таким образом: {{ ::myFunction() }}.

В angular 2 это метает:

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

Как мы можем сделать привязку времени в angular2?

4b9b3361

Ответ 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>

Ответ 3

В настоящее время вы не можете выполнить привязку времени с помощью Angular 2. Однако вы можете узнать, когда меняется привязка и reset ваши входы.

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 для записи изменений.

Ответ 4

ChangeDetectionStrategy.CheckOnce является решением этой проблемы.

Это обновление до OnPush см. также комментарий в коде:

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

Ответ 5

Поскольку одно время read/bind невозможно по умолчанию в угловом, я думаю, что создание публичной функции 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 сможет ответить назад до того, как будет выполнен рендеринг шаблона. Таким образом, инициализация mynumber была бы замечательной, если бы она выполнялась в функции ngOnInit()