Обнаружение изменения запуска Вручную в Angular

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

243
angular angular2-changedetection

4 ответов

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

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

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

427

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

  1. импорт NgZone:

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

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

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

  3. выполнить код с zone.run:

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

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

Импорт ChangeDetectorRef 

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

Inject и инстанцировать его

constructor(private ref: ChangeDetectorRef) { 
}

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

this.ref.markForCheck();

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

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

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

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

45

в Angular 2 + попробуйте @ input decorator

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

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

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

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

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

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

@Input()
public childVariable: any

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

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

2