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

Я пишу угловой компонент, который имеет свойство Mode(): string.

Я хотел бы иметь возможность установить это свойство программно, а не в ответ на любое событие.

Проблема в том, что при отсутствии события браузера привязка шаблона {{Mode}}не обновляется.

Есть ли способ вызвать это обнаружение изменений вручную?

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

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

Вы можете вводить ApplicationRef, NgZoneили ChangeDetectorRefв компонент.

Я использовал принятую ссылку на ответ и хотел бы привести пример, поскольку документацию по 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)
   

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

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

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

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

constructor(private ref: ChangeDetectorRef) { 
}

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

this.ref.markForCheck();

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

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

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

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

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

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

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

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

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

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

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

@Input()
public childVariable: any

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

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

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