0

我遇到了一个奇怪的情况，这种情况似乎只发生在第一次在一个基于大量组件的页面上加载一个组件时（加载 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(){
    }
}

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

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

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

  1. 将输入更改为主题，以便我推送输入值，该值应确保触发正确的事件（这似乎有点矫枉过正）。

  2. 当请求以正确的值返回时，使用动态加载器加载组件（也似乎有点矫枉过正）。

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

任何建议，将不胜感激。

谢谢！

4

2 回答 2

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()检查解决了它...

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

于 2016-02-18T20:29:41.190 回答
0

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

于 2016-02-20T00:44:43.560 回答