63

サービスからのイベントによってトリガーされるアプリケーション ビューを更新したいと思います。

私のサービスの 1 つは、ChangeDetectorRef を挿入します。コンパイルは機能しますが、アプリのブートストラップ時にブラウザーでエラーが発生します: No provider for ChangeDetectorRef!.

AppModule に追加する必要があると思いましたが、そこにインポートできるモジュールにあることを示唆するドキュメントが見つかりません。クラス自体をインポート配列に追加しようとしましたが、エラーが発生しました。また、モジュールの providers 配列に追加しようとするとエラーが発生しました。これが私のサービスの簡略版です。

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 を更新しようとしていました。Angular 2.0.0 の最終リリースでは、最新バージョンの angular を使用するように angular-cli を更新しました。だから私は彼らのアップグレード手順を試してみるつもりです.うまくいくことを願っています.

更新 2

webpack/angular-cli の更新はうまくいきました。現在、Angular 2.0.0 と angular-cli 1.0.0-beta14 を使用してアプリをビルドしています。ブラウザでも同じエラーが表示されます。サービスからChangeDetectorRefを削除しようとしましたが、そうではありませんでした。私は2つのサービスでそれを持っていました。両方のサービスから削除すると、 ChangeDetectorRefを使用しようとしていた場所を除いて、アプリが正常に読み込まれ、正常に動作します。ファイルの 1 つに追加し直すと、ブラウザーはそのプロバイダーを見つけることができないと文句を言います。

モジュールにインポートしようとしましたが、モジュールではないため、トランスパイラーが文句を言います。モジュールにプロバイダーをリストしようとしましたが、提供プロパティがないため、トランスパイラーが文句を言います。宣言配列に入れようとすると、同様の問題が発生します。

4

6 に答える 6

9

サービスから変更をトリガーするが、コンポーネントが応答するかどうか、いつ、どのように応答するかを制御できるようにする場合の別のオプションは、サブスクリプションを設定することです。

サービスで、次を追加しますEventEmitter。

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

変更検出サイクルをトリガーする必要がある可能性のある何かがサービスで発生した場合は、次のように発行します。

this.changeDetectionEmitter.emit();

これで、このサービスを使用する任意のコンポーネントで、可能な変更トリガーをリッスンする必要がある場合、サブスクライブして適切に反応できます。

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

このアプローチは、変更検出の制御をそれが属するコンポーネントに任せることができるので、ちょっと気に入っていますが、サービス内のロジックを集中化することができます。サービスは、UI について何も知る必要はありません。リッスンしているすべての人に何かが変更されたことを通知するだけです。

于 2018-02-11T21:20:33.850 に答える