変更後のコンポーネントの再描画コンポーネント

Question

ルックコード。私は他の構成要素に{...} = this.app.selectedProject変更

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

、私は、このコンポーネントの再レンダリングしたいです。どうやってするの？ EventEmitterを使用している場合にのみ作成されます。

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

Answer 1

実際には、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 
     } 
    }); 
    } 
} 

は、より多くの詳細については、この質問を参照してください。これはベストプラクティスであるかどうか、私は知りませんが、私はドン

• detect change of nested property for component input

Answer 2

」を変更検出のようなものでイベントを扱う方が好きなので、これは私が似たようなケースを扱う方法です：

まず、データが下に流れ、イベントflo上向き（親が上にあることを考慮）。 つまり、データを変更する場合は親で変更し、子は自動的に更新されます。これを行うには、親にevenを送信する必要があります。

1. は今それを行うために、子供に、我々は@Output() eventToSend: EventEmitter = new EventEmitter();を定義する必要があり、我々は我々がイベントに耳を傾ける必要があり、親でthis.eventToSend.next(params);
2. を使って をトリガー、行うための一つの方法は、テンプレート内にあります、 (eventToSend)="eventListen($event)"を追加し、tsファイルにはeventListen(params)を定義して、何でもしてください。

私はこれがあなたが探していることを望みます。

Answer 3

実際に別のオブジェクトをサービスのselectedProjectプロパティに割り当てている場合、ProjectInfoComponentはわかりません... projectプロパティは、元の/以前のコンストラクタで設定された選択されたプロジェクトオブジェクト。

プロジェクトの変更時にProjectInfoComponentのprojectプロパティに通知する必要がある場合は、SubjectまたはObservableを使用します。料理本には、科目とオブザーバの使い方の良い例があります：bi-directional service。

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