Запуск обнаружения изменений вручную в угловой

Question

Запуск обнаружения изменений вручную в угловой

Я пишу угловой компонент, который имеет свойство Mode(): string. Я хотел бы иметь возможность установить это свойство программно не в ответ на какое-либо событие. Проблема в том, что при отсутствии события браузера, привязка шаблона {{Mode}} не обновляет. Есть ли способ запустить это обнаружение изменений вручную?

498 4

angular angular2-changedetection

4 ответов:

Comments

Ничего не найдено.

Mark Rajcok · Accepted Answer · 2017-12-16 23:34:12

попробуйте один из этих:

ApplicationRef.tick() - похоже на AngularJS $rootScope.$digest() -- т. е. проверьте полное дерево компонентов

NgZone.run(callback) - аналогично $rootScope.$apply(callback) -- т. е., оцените функцию обратного вызова внутри угловой зоны. Я думаю, но я не уверен, что это заканчивается проверкой полного дерева компонентов после выполнения функции обратного вызова.

ChangeDetectorRef.detectChanges() - аналогично $scope.$digest() -- то есть, проверить только этот компонент и его дети

вы можете впрыснуть ApplicationRef,NgZone или ChangeDetectorRef в компоненте.

juanpastas · Accepted Answer · 2017-03-06 19:04:12

я использовал принятую ссылку на ответ и хотел бы привести пример, поскольку документация Angular 2 очень трудно читать, я надеюсь, что это проще:
импорт NgZone:
import { Component, NgZone } from '@angular/core';
добавить его в конструктор класса
constructor(public zone: NgZone, ...args){}
запустите код с помощью zone.run:
this.zone.run(() => this.donations = donations)

Nuno Tomas · Accepted Answer · 2017-08-25 19:33:56

я смог обновить его с markForCheck ()

Импорт ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
ввести и создать экземпляр
constructor(private ref: ChangeDetectorRef) { 
}
наконец, отметьте обнаружение изменений, чтобы иметь место
this.ref.markForCheck();
вот пример, где markForCheck () работает и detectChanges () не делают.

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

EDIT: этот пример не изображает проблему больше : (я считаю, что он может работать с более новой угловой версией, где он исправлен.

(нажмите STOP / RUN, чтобы запустить его снова)

Jeremy Swagger · Accepted Answer · 2017-12-22 18:18:48

в угловой 2+, попробуйте @ Input decorator

это позволяет для некоторых хороших свойств привязки между родительскими и дочерними компонентами.

сначала создайте глобальную переменную в Родительском объекте для хранения объекта / свойства, который будет передано ребенку.

затем создайте глобальную переменную в дочернем элементе для хранения переданного объекта / свойства от родителей.

затем в Родительском html, где используется дочерний шаблон, добавьте квадрат скобки обозначение С именем дочерней переменной, затем установите его равным имени родительской переменной. Пример:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
наконец, если свойство child определено в дочернем компоненте, добавьте Входной декоратор:
@Input()
public childVariable: any
когда ваша родительская переменная обновляется, она должна передать обновления дочернему компоненту, который обновит свой html.

кроме того, чтобы вызвать функцию в дочернем компоненте, взгляните на ngOnChanges.