Триггерное обновление представления компонентов из службы - Нет провайдера для ChangeDetectorRef

Ответ 1

ChangeDetectorRef здесь не используется. Он ищет изменения в заданном компоненте и его дочерних элементах.

В вашем случае Лучше использовать ApplicationRef:

import {Injectable, ApplicationRef } from '@angular/core';

@Injectable()
export class MyService {
  private count: number = 0;
  constructor(private ref: ApplicationRef) {}

  increment() {
    this.count++;
    this.ref.tick();
  }
}

Я проверил это решение с помощью Observables, и он работает без проблем:

import { ApplicationRef, Injectable } from '@angular/core';
import { Observable, ReplaySubject } from "rxjs/Rx";
import * as childProcess from 'child_process';

@Injectable()
export class Reader {

    private output: ReplaySubject<string> = new ReplaySubject<string>(0);

    constructor(private ref: ApplicationRef) {
        var readerProcess = childProcess.spawn('some-process');
        readerProcess.stdout.on('data', (data) => {
            this.output.next(data.toString());
            this.ref.tick();
        });
    }

    public getOutput():Observable<string> {
        return this.output;
    }
}

и вот компонент, который использует его:

import {Component} from '@angular/core';
import { ReplaySubject, Observable } from "rxjs/Rx";

import { Reader } from './reader/reader.service';

@Component({
    selector: 'app',
    template: `
    output:
    <div>{{output}}</div>
    `
})
export class App {

    public output: string;

    constructor(private reader: Reader) {}

    ngOnInit () {
        this.reader.getOutput().subscribe((val : string) => {
            this.output = val;
        });
    }
}

Ответ 2

Другой вариант, если вы хотите инициировать изменение из службы, но позволяете компонентам контролировать, реагируют ли они, когда и как они реагируют, - настраивать подписки.

К вашим услугам добавьте EventEmitter:

changeDetectionEmitter: EventEmitter<void> = new EventEmitter<void>();

Если в службе происходит что-то, что может потребовать запуска цикла обнаружения изменений, просто введите:

this.changeDetectionEmitter.emit();

Теперь в любых компонентах, которые используют этот сервис, если им нужно прослушивать возможные триггеры изменений, они могут подписаться и соответствующим образом реагировать:

this.myService.changeDetectionEmitter.subscribe(
    () => {
      this.cdRef.detectChanges();
    },
    (err) => {
      // handle errors...
    }
  );

Мне нравится этот подход, потому что он оставляет контроль над обнаружением изменений компонентами, к которым он относится, но позволяет мне централизовать логику в сервисе. Службе не нужно ничего знать о пользовательском интерфейсе, она просто уведомляет любого, кто слушает, что-то изменилось.

Ответ 3

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

import { TestBed } from '@angular/core/testing';
import { ChangeDetectorRef } from '@angular/core';
import { MyService } from './my.service';

describe('MyService', () => {
    beforeEach(() => TestBed.configureTestingModule({
        providers: [ChangeDetectorRef] // <--- LOOK AT ME I'M A PROVIDER!
    }));

    it('should be created', () => {
        const service: MyService = TestBed.get(MyService);
        expect(service).toBeTruthy();
    });
});

Надежда помогает

Ответ 4

Я знаю, что я давно этого ждал, но я попытался просто передать ChangeDetectorRef в Сервис через вызываемую функцию.

//myservice
import { Injectable, ChangeDetectorRef } from '@angular/core';

@Injectable()
export class MyService {
  constructor(){}

  increment(ref: ChangeDetectorRef, output: number) {
    output++;
    ref.detectChanges();
}

Компонент

import {Component} from '@angular/core';
import { MyService } from './myservice.service';

@Component({
    selector: 'app',
    template: '
    output:
    <div>{{output}}</div>
    '
})
export class App {

    public output: number;

    constructor(public ref: ChangeDetectorRef, private myService: MyService) {}

    ngOnInit () {
       this.myService.increment(this.ref,output)
    }
}

Ответ 5

Использовать ApplicationRef - хорошее решение. У меня есть еще несколько решений:

1. Использование setTimeout

   @Injectable()
   export class MyService {
     private count: number = 0;
     constructor(){}
   
     increment() {
       setTimeout(() => this.count++, 0);
     }
   }
   

2. Использование Promise

   @Injectable()
   export class MyService {
     private count: number = 0;
     constructor(){}
   
     increment() {
       Promise.resolve().then(() => this.count++);
     }
   }
   

Оба решения вынуждают Angular запускать обнаружение изменений, если вы используете Zone.js для обнаружения изменений - это способ по умолчанию, и 99% приложений используют его.