Meteor 使用组件输入更新模板

前言：我对Meteor、Angular和Typescript还不熟悉，所以在这里的某个地方确实有可能出现XY问题

---

我正在使用Meteor和Angular 2（使用软件包）开发一个简单的项目管理应用程序，其中结构（目前）由包含事件的项目组成。一个视图是项目列表。单击项目会显示项目详细信息的模式，包括项目事件的列表。因此，有三个组件：

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

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

执行此操作时，列表将停止显示任何项目

如果这一切看起来都是可行的，我将创建一个小测试用例来发布，但我希望这里的一些东西对那些知道的人来说显然是错误的。谢谢

this.subscribe（）

和

this.autorun（）

似乎不属于角度组件类。如果这是一个外部库，您可能需要在角度区域中显式运行它，以便更改检测工作：

构造函数（专用区域：NgZone）{
this.subscribe（'projectEvents'，this.projectId，（）=>{
这个。自动运行（（）=>{
区域运行（（）=>{
this.projectEvents=projectEvents.find（{projectId:this.projectId}）；
});
}，对）；
});
}

如果要订阅从组件本身触发的事件，请使用主机绑定

@组件(
{选择器：'某个选择器'，
主机：{'projectEvents'：'ProjectSevenHandler（$event）}
导出类组件{
projectsEventHandler（事件）{
//做点什么
}
}

我最终让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>;

    projectId: string;

    constructor() {
        super();

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

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

从'angular2/core'导入{Component，View}；
从“angular2 meteor”导入{MeteoComponent}；
从“集合/ProjectEvents”导入{ProjectEvents}；
@组成部分({
选择器：“projectEventsList”，
输入：['projectId']
})
@看法({
templateUrl:“/client/projectEventsList/projectEventsList.html”
})
导出类ProjectEventsList组件{
projectEvents:Mongo.Cursor；
集合projectId（id:string）{
这个._projectd=id；
this.projectEventsSub=this.subscribe（'projectEvents'，this.\u projectId，（）=>{
this.projectEvents=projectEvents.find（{projectId:this.\u projectId}，{sort:{startDate:1}}）；
}，对）；
}
获取projectId（）{
把这个还给我；
}
构造函数（）{
超级（）；
this.subscribe（'projectEvents'，this.projectId，（）=>{
this.projectEvents=projectEvents.find（{projectId:this.projectId}）；
}，对）；
}
}

关于区域的前半部分：这不是我熟悉的概念，因此感谢您提醒我这一区别（即在角度区域之外运行代码）！酷。但是，我不认为它解决了根本问题-自动运行从未自动运行。是的，我花了一段时间才开始理解你的问题。第二部分呢？该事件来自何处？

projectevents列表

与此代码一起插入

ProjectDetails

：

我不太确定你想做什么是指事件，但当我在

ProjectList

中单击一个项目时，它会更新

ProjectDetails

，并将新的输入值发送到

ProjectEventsList

。但是

ProjectEventsList

不会对更新的id执行任何操作。我仍然很难理解您期望的行为。您能添加更多代码来演示吗评估

peopjecteventlist

和

ProjectList

之间的关联程度。plnkr会很好。