Question

看代码。

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

Answer 1

我不知道这是不是最好的做法，但我不喜欢变化检测，而更喜欢使用事件，所以，这就是我处理类似情况的方法：

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

现在要做到这一点，在孩子身上，我们应该定义@Output() eventToSend: EventEmitter = new EventEmitter();并触发它使用this.eventToSend.next(params);
在父级中，我们必须听取事件，一种方法是在模板内部，您可以添加(eventToSend)="eventListen($event)"，在ts文件中，您只需定义eventListen(params)和尽你所能。

我希望这就是你要找的东西。

Answer 2

如果在“其他组件”中你真的在为服务的selectedProject属性分配一个不同的对象，那么ProjectInfoComponent永远不会知道......它的project属性仍然会引用（指向在构造函数中设置的原始/上一个选定项目对象。

如果所选项目发生更改时需要通知ProjectInfoComponent的project属性，请使用Subject或Observable。该食谱有一个很好的例子，说明如何使用主题和观察者：bi-directional service。

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

Answer 3

实际上，这取决于您更新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

更改双面对象后重绘组件

3 个答案: