1

コードを見てください。

import {Component} from 'angular2/core';
import {App} from 'client/project/project.app';
import {ProjectService} from 'service/project.service';

@Component({
    selector: 'project-info',
    templateUrl: 'client/project/info/project-info.html'
})
export class ProjectInfoComponent {
    project:IProject;

    constructor(
        private app: App,
        private projectService: ProjectService
    ){         
      this.project = this.app.selectedProject;
    }
}

他のコンポーネントで this.app.selectedProject={...} を変更したので、このコンポーネントを再レンダリングしたいと思います。どうやってするの？EventEmitter を使用する場合にのみ発明されます。

this.app.selectedProject.subscribe(project => {
 this.project = project;
});
4

3 に答える 3

1

「他のコンポーネント」で実際に別のオブジェクトをサービスのselectedProjectプロパティに割り当てている場合、 ProjectInfoComponent は決して知りません...そのprojectプロパティには、設定された元の/以前に選択されたプロジェクトオブジェクトへの参照(ポイント)がまだありますコンストラクターで。

選択したプロジェクトが変更されるたびにProjectInfoComponent のprojectプロパティに通知する必要がある場合は、Subject または Observable を使用します。クックブックには、サブジェクトとオブザーバブルの使用方法の良い例があります:双方向サービス。

通知を受ける必要がない場合 (つまり、選択したプロジェクトが変更されたときにコンポーネント ロジック/コードを実行する必要がない場合)、より簡単な解決策は、独自のproject参照を作成するのではなく、サービス プロパティにバインドすることです (これは同期が外れる可能性があります)。たとえば、ProjectInfoComponent のテンプレートでは、次のようなものを使用します{{app.selectedProject.somePropertyHere}}。これで、サービスのselectedProjectプロパティが変更されるたびに、ビューが更新されます。

于 2016-03-30T21:58:53.610 に答える
0

実際、更新方法によって異なりますthis.app.selectedProject。Angular2 は、オブジェクト内の要素が更新されたときではなく、参照全体が変更されたときのみデフォルトで検出します。

// For example updating the name of selectedProject. This won't
// refresh the component view
this.app.selectedProject.name = 'some name';

// For example updating the name of selectedProject. This will
// refresh the component view
this.project = { name: 'some name' };

参照するオブジェクトへの変更を本当に検出したい場合。カスタム チェックを実装するには、DoCheckインターフェイスとクラスを活用する必要があります。KeyValueDiffers以下にサンプルを示します。

@Component({
  selector: 'project-info',
  (...)
}) 
export class ProjectInfoComponent implements DoCheck {
  project: IProject;
  differ: any;

  constructor(differs:  KeyValueDiffers) {
    this.differ = differs.find([]).create(null);
  }

  ngDoCheck() {
    var changes = this.differ.diff(this.myObject);

    if (changes) {
      changes.forEachChangedItem((elt) => {
        // elt.key tells which property in the object was updated
      }
    });
  }
}

詳細については、この質問を参照してください。

于 2016-03-29T11:57:22.667 に答える