Запуск виявлення змін вручну в кутовій

Я пишу 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 () працює, а detectChanges () не працює.

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

EDIT: Цей приклад більше не зображує проблеми :( Я вважаю, що це може бути запущена нова кутова версія, де вона виправлена.

(Натисніть STOP / RUN, щоб запустити його знову)

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

Це дозволяє приємно зв'язувати властивості між батьківським і дочірнім компонентами.

Спочатку створіть глобальну змінну у батьків, щоб утримувати об’єкт / властивість, які будуть передані дитині.

Далі створіть у дитини глобальну змінну для зберігання переданого від батьків об'єкта / властивості.

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

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

Нарешті, де дочірнє властивість визначено в дочірньому компоненті, додайте декоратор введення:

@Input()
public childVariable: any

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

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

ChangeDetectorRef.detectChanges () - подібний до $ range. $ Digest () - тобто перевіряйте лише цей компонент та його дітей