Question

前言：我是Meteor，Angular和Typescript的新手，所以在这里某处存在XY问题的可能性很大。

我正在使用Meteor和Angular 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()添加/删除autobind参数。我真的不明白应该做些什么。

将订阅代码移至projectId上的setter：

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

this.subscribe()和this.autorun()似乎不是Angular组件类的一部分。如果这是一个外部库，您可能需要在Angular区域中显式运行它以使更改检测正常工作：

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

如果要订阅从组件本身触发的事件，请使用host-binding

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

Answer 2

我最终得到了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);
    }
}

使用组件输入更新模板

2 个答案: