Обнаружение изменений вручную в Angular

Question

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

Answer 1

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

• ApplicationRef.tick() - похоже на AngularJS's $rootScope.$digest() - т.е. проверить полное дерево компонентов
• NgZone.run(callback) - похожий на $rootScope.$apply(callback) Т.е. оценить функцию обратного вызова внутри угловой зоны. Я думаю, но я не уверен, что это заканчивается проверкой полного дерева компонентов после выполнения функции обратного вызова.
• ChangeDetectorRef.detectChanges() - похожий на $scope.$digest() проверять только этот компонент и его дочерние элементы

Вы можете ввести ApplicationRef, NgZone, или же ChangeDetectorRef в ваш компонент.

Answer 2

Я использовал принятую ссылку на ответ и хотел бы привести пример, поскольку документацию по Angular 2 очень очень трудно читать, я надеюсь, что это проще:

1. Импортировать NgZone:

   import { Component, NgZone } from '@angular/core';
   

2. Добавьте его в свой конструктор класса

   constructor(public zone: NgZone, ...args){}
   

3. Запустите код с zone.run:

   this.zone.run(() => this.donations = donations)
   

Answer 3

Я смог обновить его с помощью markForCheck()

Импортировать ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

Внедрить и создать его

constructor(private ref: ChangeDetectorRef) { 
}

Наконец, отметьте обнаружение изменений, чтобы иметь место

this.ref.markForCheck();

Вот пример, где markForCheck() работает, а detectChanges() - нет.

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

РЕДАКТИРОВАТЬ: Этот пример больше не отображает проблему:(Я думаю, что это может быть запущена более новая версия Angular, где она исправлена.

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

Answer 4

В Angular 2+ попробуйте декоратор @Input

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

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

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

Затем в родительском html, где используется дочерний шаблон, добавьте обозначение в квадратных скобках с именем дочерней переменной, а затем установите его равным имени родительской переменной. Пример:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

Наконец, если дочернее свойство определено в дочернем компоненте, добавьте декоратор ввода:

@Input()
public childVariable: any

Когда ваша родительская переменная обновлена, она должна передать обновления дочернему компоненту, который обновит свой html.

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

Answer 5

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