Angular 2 设置新值不会触发输入更改事件答案

【问题标题】：Angular 2 setting a new value does not trigger an input change eventAngular 2 设置新值不会触发输入更改事件
【发布时间】：2016-02-18 20:10:02
【问题描述】：

我遇到了一个奇怪的情况，这种情况似乎只发生在第一次在基于大量组件的页面上加载组件时（加载 30 多个组件）。

@Component{
    selector: <parent-component>
    template: `<child-component [myObject]=myObject>
}
export class ParentComponent { 
    private myObject:DTOValue;
    constructor(service:MyService){
        service.getDTOValue().subscribe((dtoValue:DTOValue) => {
            this.myObject = dtoValue;
        });
    }
}

@Component{
    selector: <child-component>
    template: `<div></div>
}
export class ChildComponent { 
    @Input set myObject(value:DTOValue) => {//do something};
    constructor(){
    }
}

在此代码中，Parent 将获取一个值作为子项的输入。该值来自稍后的请求，因此当第一次初始化子时，输入可能是未定义的。当该值确实从请求中返回并在变量myObject 上设置时，我希望子组件会收到一个被触发的输入事件。但是，由于时间的关系，情况似乎并非总是如此，尤其是当我第一次加载一个包含大量正在加载的文件的页面时。

在子组件没有收到输入的情况下，如果我点击页面上的其他位置，它现在似乎会触发更改检测并获取输入值。

我能想到的 2 种可能的解决方案需要对代码进行一些大的更改，因此我想确保在实施它们之前立即选择正确的解决方案。

将输入更改为主题，以便我推送应确保触发正确事件的输入值（这似乎有点矫枉过正）。
当请求返回正确的值时，使用动态加载器加载组件（也似乎有点矫枉过正）。

更新： 添加 plnker：http://plnkr.co/edit/1bUelmPFjwPDjUBDC4vb，您可以在这里看到标题似乎永远不会应用其数据绑定。

任何建议将不胜感激。

谢谢！

【问题讨论】：

标签： angularjs angular angular2-inputs

【解决方案1】：

如果您可以确定问题出在哪里以及可以解决问题的适当生命周期钩子，您可以使用ChangeDetectorRef 让 Angular 知道。

constructor(private _ref: ChangeDetectorRef)

method_where_changes_are_overlooked() {
  do_something();
  // tell angular to force change detection
  this._ref.markForCheck();
}

我遇到了类似的问题，只有路由器 - 当/如果 API 服务器脱机时，它需要进行重定向。我通过标记routerOnActivate() 进行检查来解决它...

当您以这种方式触发更改检测时，组件树的“分支”会被标记为从该组件到应用根目录进行更改检测。关于这个话题你可以看this talk by Victor Savkin...

【讨论】：

不幸的是，这个解决方案不起作用。在进行了一些挖掘之后，似乎 ParentComponent 的生命周期从未被触发。构造函数被击中，但如果我添加 ngOnInit、ngAfterViewInit，这些都不会被调用。我向具有单击方法的模板添加了一个按钮。如果我单击该按钮，生命周期就会开始，一切都会按我的预期进行。我想问题是如何在不使用按钮加载的情况下获得意图行为。

【解决方案2】：

抱歉，问题最终是我与 jQuery 的交互。当我在 jQuery 代码中触发要加载的组件的事件时，它不会触发生命周期。修复是在加载代码之后调用更改检测。

【讨论】：