Cập nhật kích hoạt chế độ xem thành phần từ dịch vụ - Không Nhà cung cấp nào cho ChangeDetectorRef

Question

Tôi muốn udpate chế độ xem ứng dụng của tôi, được kích hoạt bởi các sự kiện từ dịch vụ.

Một trong các dịch vụ của tôi tiêm ChangeDetectorRef. Biên dịch hoạt động, nhưng tôi gặp lỗi trong trình duyệt khi ứng dụng được khởi động: No provider for ChangeDetectorRef!.

Tôi nghĩ tôi cần thêm nó vào AppModule của mình, nhưng tôi không thể tìm thấy bất kỳ tài liệu nào cho thấy nó nằm trong một mô-đun mà tôi có thể nhập vào đó. Tôi đã thử thêm chính lớp đó vào mảng nhập, nhưng điều đó gây ra lỗi. Tôi cũng gặp lỗi khi cố gắng thêm nó vào mảng nhà cung cấp trong mô-đun. Đây là một phiên bản đơn giản của dịch vụ của tôi:

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

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

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

Và các module ứng dụng:

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 {} 

CẬP NHẬT

Tôi có kể từ khi cố gắng xóa bỏ sử dụng của tôi ChangeDetectorRef, và tôi vẫn còn có vấn đề giống nhau. Tôi đoán có điều gì đó sai về cách tôi cập nhật cấu hình System JS của mình.

Tôi ban đầu đã tạo ứng dụng với angular-cli và đang cố gắng cập nhật Angular một mình vì chúng chưa cập nhật điều đó. Với bản phát hành cuối cùng của Angular 2.0.0, họ đã cập nhật angular-cli để sử dụng phiên bản mới nhất của góc. Vì vậy, tôi sẽ cố gắng sử dụng các thủ tục nâng cấp của họ và hy vọng rằng sẽ tốt hơn.

Cập nhật 2

Các webpack/cập nhật góc-cli diễn ra tốt đẹp. Tôi có ứng dụng xây dựng ngay bây giờ với Angular 2.0.0 và angular-cli 1.0.0-beta14. Tôi vẫn gặp lỗi tương tự trong trình duyệt. Tôi đã thử xóa ChangeDetectorRef khỏi dịch vụ, nhưng tôi đã không thực sự. Tôi đã có nó trong hai dịch vụ. Nếu tôi xóa nó khỏi cả hai dịch vụ thì ứng dụng của tôi sẽ tải tốt và hoạt động tốt, ngoại trừ nơi tôi đang cố gắng sử dụng ChangeDetectorRef. Khi tôi thêm lại vào một trong các tệp, trình duyệt đã phàn nàn về việc không thể tìm nhà cung cấp cho nó.

tôi đã cố gắng nhập khẩu nó trong mô-đun của tôi, nhưng nó không phải là một mô-đun , vì vậy transpiler phàn nàn. Tôi đã thử liệt kê một nhà cung cấp trong mô-đun của tôi, nhưng nó không có thuộc tính cung cấp, do đó trình thu thập thông tin phàn nàn. vấn đề tương tự nếu tôi thử đặt nó trong các tờ khai .

Answer 1

ChangeDetectorRef không phải là tùy chọn để sử dụng tại đây. Nó đang tìm kiếm những thay đổi trong một thành phần nhất định và trẻ em của nó.

Trong trường hợp của bạn Nó sẽ là tốt hơn để sử dụng 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(); 
    } 
} 

Tôi đã kiểm tra giải pháp này với Observables và nó hoạt động mà không cần bất kỳ vấn đề:

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

và đây là một thành phần trong đó sử dụng nó :

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

Answer 2

trong các phiên bản mới nhất là một phần của lõi bây giờ, vì vậy chỉ cần thực hiện một tham chiếu đến cốt lõi nhưng sử dụng các biến cần thiết và nên làm lừa

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

Hope giúp

Answer 3

Một lựa chọn khác nếu bạn muốn kích hoạt sự thay đổi từ dịch vụ nhưng cho phép các thành phần để kiểm soát xem, khi nào và cách họ phản hồi là thiết lập đăng ký.

Trong dịch vụ của bạn, thêm một EventEmitter:

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

Khi một cái gì đó xảy ra trong các dịch vụ mà có thể cần phải kích hoạt một chu kỳ phát hiện sự thay đổi, chỉ cần phát ra:

this.changeDetectionEmitter.emit(); 

Bây giờ, trong bất kỳ thành phần sử dụng dịch vụ này, nếu họ cần lắng nghe các yếu tố kích hoạt thay đổi có thể, họ có thể đăng ký và phản ứng một cách thích hợp:

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

Tôi giống như cách tiếp cận này bởi vì nó để lại kiểm soát phát hiện thay đổi với các thành phần mà nó thuộc về, nhưng cho phép tôi tập trung logic vào dịch vụ. Dịch vụ này không cần phải biết bất cứ điều gì về giao diện người dùng, nó chỉ thông báo cho bất kỳ ai đang nghe rằng có gì đó đã thay đổi.