Инициировать обновление представления компонента из службы — нет поставщика для ChangeDetectorRef

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;
        });
    }
}

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

В вашем сервисе добавьте EventEmitter:

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

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

this.changeDetectionEmitter.emit();

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

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

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

Я знаю, что мне давно пора это сделать, но я попытался просто передать 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)
    }
}

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

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();
    });
});

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

Использовать 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% приложений.

Вам нужно добавить свой сервис к провайдерам на уровне компонентов:

@Component({
  // ...
  providers: [MyService]
})
export class SomeComponent {
  // ...
}