从服务触发组件视图的更新-没有ChangeDetectorRef的提供者 [英] Trigger update of component view from service - No Provider for ChangeDetectorRef

问题描述

我想通过服务事件触发我的应用程序视图.

I would like to udpate my application view, triggered by events from service.

我的一项服务注入了ChangeDetectorRef.编译有效，但是当应用程序被引导时，浏览器出现错误:No provider for ChangeDetectorRef!.

One of my services injects the ChangeDetectorRef. Compilation works, but I am getting an error in the browser when the App is bootstrapped: No provider for ChangeDetectorRef!.

我以为我需要将其添加到我的AppModule中，但是我找不到任何文档表明它可以导入该模块中.我尝试将类本身添加到导入数组中，但这引起了错误.尝试将其添加到模块中的providers数组时，我也遇到了错误.这是我的服务的简化版本:

I thought I needed to add it to my AppModule, but I can't find any documentation that suggests it is in a module that I can import there. I tried adding the class itself to the import array, but that caused an error. I also got an error trying to add it to the providers array in the module. Here is a simplified version of my service:

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的使用，但仍然遇到相同的问题.我猜我如何更新系统JS配置有问题.

我最初是使用angular-cli创建该应用程序的，但由于我自己没有更新Angular，因此我尝试自己进行更新.在Angular 2.0.0的最终版本中，他们更新了angular-cli以使用最新版本的angular.因此，我将尝试使用他们的升级过程，希望会更好.

I originally created the app with angular-cli, and was trying to update Angular on my own since they had not updated that. With the final release of Angular 2.0.0 they have updated angular-cli to use the latest version of angular. So I am going to try using their upgrade procedures and hopefully that goes better.

更新2

webpack/angular-cli更新进展顺利.我现在使用Angular 2.0.0和angular-cli 1.0.0-beta14构建应用程序.我仍然在浏览器中收到相同的错误.我尝试从服务中删除 ChangeDetectorRef ，但实际上并非如此.我有两次服务.如果我从两个服务中都将其删除，则除了我尝试使用 ChangeDetectorRef 的地方之外，我的应用程序都可以正常运行，并且运行良好.一旦我将其重新添加到其中一个文件中，浏览器就会抱怨无法为其找到提供程序.

The webpack/angular-cli update went well. I have the app building now with Angular 2.0.0 in and angular-cli 1.0.0-beta14. I still get the same error in the browser. I tried removing the ChangeDetectorRef from the service, but I didn't really. I had it in two services. If I remove it from both services, then my app loads fine, and works well, except for where I was trying to use ChangeDetectorRef. Once I add it back in one of the files, the browser has complains about not being able to find a provider for it.

我尝试将其导入我的 module 中，但它不是 module ，因此编译器抱怨.我尝试在模块中将其列出为 provider ，但它没有提供属性，因此编译器抱怨.如果我尝试将其放在声明数组中，则会遇到类似的问题.

I tried importing it in my module, but it is not a module, so the transpiler complains. I tried listing it a a provider in my module, but it does not have a provide property, so the transpiler complains. similar issues if I try putting it in the declarations array.

推荐答案

ChangeDetectorRef不是在此处使用的选项.它正在寻找给定组件及其子组件中的更改.

ChangeDetectorRef is not option to use here. It is looking for changes in a given component and its children.

根据您的情况，最好使用ApplicationRef:

In your case It would be better to use 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检查了该解决方案，它的工作原理没有任何问题:

I checked this solution with Observables and it works without any problems:

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

这篇关于从服务触发组件视图的更新-没有ChangeDetectorRef的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！