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属性仍然会引用（指向）设置的原始/先前选择的项目对象在构造函数中。

project如果在所选项目更改时需要通知ProjectInfoComponent 的属性，请使用 Subject 或 Observable。这本食谱有一个很好的例子来说明如何使用 Subjects 和 Observables：双向服务。

如果不需要通知您（即，当所选项目更改时您不需要执行任何组件逻辑/代码），更简单的解决方案是绑定到服务属性而不是创建自己的project引用（可能会不同步）。例如，在 ProjectInfoComponent 的模板中，使用类似{{app.selectedProject.somePropertyHere}}. 现在，只要服务的selectedProject属性发生变化，视图就会更新。

于 2016-03-30T21:58:53.610 回答
1

我不知道这是否是最佳实践，但我不喜欢更改检测，更喜欢处理事件，所以，这就是我处理类似情况的方式：

首先，请记住，数据向下流动，事件向上流动（考虑到父级在顶部）。换句话说，当您想更改数据时，在父级中更改它，子级将自动更新，为此您必须向父级发送偶数。

  1. 现在要做到这一点，在孩子中，我们应该定义@Output() eventToSend: EventEmitter = new EventEmitter();并通过使用触发它this.eventToSend.next(params);
  2. 在父级中，我们必须监听事件，一种方法是在模板内部，您可以添加(eventToSend)="eventListen($event)"并在您的ts文件中定义eventListen(params)并执行您喜欢的任何操作。

我希望这就是你要找的。

于 2016-03-29T12:02:58.143 回答
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 回答