angular - 从服务触发组件 View 更新 - ChangeDetectorRef 没有提供者

Question

我想更新我的应用程序 View ，由来自服务的事件触发。

我的一项服务注入(inject)了 ChangeDetectorRef。编译工作正常，但在引导应用程序时我在浏览器中收到错误消息:No provider for ChangeDetectorRef!。

我想我需要将它添加到我的 AppModule 中，但我找不到任何文档表明它在我可以导入的模块中。我尝试将类本身添加到导入数组中，但这导致了错误。我在尝试将其添加到模块中的提供程序数组时也遇到了错误。这是我的服务的简化版本:

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

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

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

和应用模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { MyService } from './my.service';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ MyService ],
  booststrap: [ AppComponent ]
})
export AppModule {}

更新

此后我尝试删除对 ChangeDetectorRef 的使用，但我仍然遇到同样的问题。我猜我更新 System JS 配置的方式有问题。

我最初使用 angular-cli 创建应用程序，并试图自己更新 Angular，因为他们没有更新它。随着 Angular 2.0.0 的最终版本，他们更新了 angular-cli 以使用最新版本的 angular。因此，我将尝试使用他们的升级程序，希望效果更好。

更新 2

webpack/angular-cli 更新顺利。我现在使用 Angular 2.0.0 in 和 angular-cli 1.0.0-beta14 构建应用程序。我仍然在浏览器中遇到同样的错误。我尝试从服务中删除 ChangeDetectorRef，但我没有这么做。我有两个服务。如果我从这两个服务中删除它，那么我的应用程序加载正常，并且运行良好，除了我尝试使用 ChangeDetectorRef 的地方。一旦我将它重新添加到其中一个文件中，浏览器就会提示无法为其找到提供程序。

我尝试将它导入我的模块，但它不是模块，因此转译器会报错。我试着在我的模块中将它列为一个 provider，但它没有 provide 属性，因此转译器会提示。如果我尝试将它放入 declarations 数组中，也会出现类似的问题。

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