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

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

Импорт NgZone:

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

Добавьте его в свой конструктор класса
```
constructor(public zone: NgZone, ...args){}
```
Выполнить код с помощью zone.run:
```
this.zone.run(() => this.donations = donations)
```

Ответ 3

Мне удалось обновить его markForCheck()

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

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

Ввести и создать экземпляр

constructor(private ref: ChangeDetectorRef) { 
}

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

this.ref.markForCheck();

Здесь пример, где markForCheck() работает и detectChanges() не делает.

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

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

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

Ответ 4

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

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

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

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

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

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

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

@Input()
public childVariable: any

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

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

Ответ 5

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