使用組件輸入更新模板

Question

前言：我是Meteor，Angular和Typescript的新手，因此在這裏某處出現XY問題的可能性非常大。

我正在使用流星和2角（使用angular2-meteor包）一個簡單的項目管理應用程序，其中結構（現在）由具有活動項目。一個視圖是項目列表。點擊一個項目會顯示項目細節的模式，包括項目事件的列表。因此，三個組件：ProjectList,ProjectDetails和ProjectEventsList。 ProjectDetails使用Session變量來知道哪個項目要顯示，並且工作。但是，模型中的事件列表在爲單擊的第一個項目創建後不會更新。

ProjectEventsList.ts

import {Component, View} from 'angular2/core'; 
import {MeteorComponent} from 'angular2-meteor'; 

import {ProjectEvents} from 'collections/ProjectEvents'; 


@Component({ 
    selector: 'projectEventsList', 
    inputs: ['projectId'] 
}) 

@View({ 
    templateUrl: '/client/projectEventsList/projectEventsList.html' 
}) 

export class ProjectEventsList extends MeteorComponent { 
    projectEvents: Mongo.Cursor<ProjectEvent>; 

    projectId: string; 

    constructor() { 
     super(); 

     this.subscribe('projectEvents', this.projectId,() => { 
      this.autorun(() => { 
       this.projectEvents = ProjectEvents.find({projectId: this.projectId}); 
      }, true); 
     }); 
    } 
} 

據我瞭解（雖然我可能會在這裏下車的方式），我有困難得到autorun，好了，自動運行。我試過在projectId上放置一個getter和setter，當點擊一個項目時它會更新，但autorun內的代碼在第一次點擊後不會運行。我試過的東西：

• 切換嵌套subscribe()和autorun()。
• 將自動綁定參數添加到subscribe()和autorun()。我真的不明白應該做什麼。

• 移動訂閱代碼到一個setter上projectId：

  private _projectId: string = ''; 
  get projectId() { 
      return this._projectId; 
  } 
  set projectId(id: string) { 
      this._projectId = id; 
  
      this.subscribe('projectEvents', this._projectId,() => { 
       this.projectEvents = ProjectEvents.find({projectId: this._projectId}); 
      }, true); 
  } 
  

  當我做這個名單停止顯示任何項目。

如果這一切似乎像它應該工作，我將創建一個小的測試案例後，但我希望的東西在這裏將是明顯錯誤的那些誰知道。謝謝！

Answer 1

我最終得到了setter方法，如下所示。它感覺笨重，所以我希望有一個更乾淨的方法來做到這一點，但下面現在爲我工作（即，當父組件（ProjectList）發送新的projectId到輸入時更新事件列表。

ProjectEventsList.ts

import {Component, View} from 'angular2/core'; 
import {MeteorComponent} from 'angular2-meteor'; 

import {ProjectEvents} from 'collections/ProjectEvents'; 


@Component({ 
    selector: 'projectEventsList', 
    inputs: ['projectId'] 
}) 

@View({ 
    templateUrl: '/client/projectEventsList/projectEventsList.html' 
}) 

export class ProjectEventsList extends MeteorComponent { 
    projectEvents: Mongo.Cursor<ProjectEvent>; 

    set projectId(id: string) { 
    this._projectId = id; 

    this.projectEventsSub = this.subscribe('projectEvents', this._projectId,() => { 
     this.projectEvents = ProjectEvents.find({projectId: this._projectId}, {sort: { startDate: 1 }}); 
    }, true); 
} 

get projectId() { 
    return this._projectId; 
} 

    constructor() { 
     super(); 

     this.subscribe('projectEvents', this.projectId,() => { 
      this.projectEvents = ProjectEvents.find({projectId: this.projectId}); 
     }, true); 
    } 
} 

Answer 2

this.subscribe()和this.autorun()似乎並不是Angular組件類的一部分。如果這是一個外部庫，你可能需要在一個角度帶明確地運行它的變化檢測工作：

constructor(private zone: NgZone) { 
    this.subscribe('projectEvents', this.projectId,() => { 
     this.autorun(() => { 
      zone.run(() => { 
       this.projectEvents = ProjectEvents.find({projectId: this.projectId}); 
      }); 
     }, true); 
    }); 
} 

如果你想訂閱組件自身所觸發的事件使用主機結合

@Component(
    {selector: 'some-selector', 
    host: {'projectEvents': 'projectsEventHandler($event)'} 
export class SomeComponent { 
    projectsEventHandler(event) { 
    // do something 
    } 
}