Question

我遇到了一个奇怪的情况，只是在第一次在一个基于大量的组件页面上加载组件时才会发生这种情况（加载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上设置时，我期望子组件将接收被触发的输入事件。但是，由于时间原因，似乎并非总是如此，特别是当我第一次加载包含大量文件的页面时。

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

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

将输入更改为主题，以便我按下输入值，以确保触发正确的事件（这看起来有点过分）。
当请求返回时，使用动态加载程序加载组件并使用正确的值（也似乎有点过分）。

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

任何建议将不胜感激。

谢谢！

Answer 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()进行检查来解决它...

当您以这种方式触发变更检测时，＆＃34;分支＆＃34;组件树的标记用于更改检测，从此组件到应用程序根目录。您可以关于此主题观看this talk by Victor Savkin ...

Answer 2

道歉，这个问题最终成为我与jQuery的互动。当我在jQuery代码内部触发要加载的组件的事件时，它不会触发生命周期。修复是在加载代码之后再调用更改检测。

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

2 个答案: