绑定模板角度之前的延迟

Question

这又与 ExpressionChangedAfterItHasBeenCheckedError 有点关系。

在我的情况下，我有一个从 ajax 调用中恢复的参数“数据”。 此数据用于通过 @input 指令创建子项。我希望仅在定义数据时才发生绑定。但我不知道如何用角度来做到这一点

export class UserComponent{
    data: any


    constructor(
        private userService: UserService){
            this.userService.getUser()
            .subscribe(result => {
                this.data = result;
            }
       }
    );
}

因为它的工作方式，angular会显示一个ExpressionChangedAfterItHasBeenCheckedError，我理解为什么，但是如何让angular等待回调完成并且数据是！=在开始绑定之前未定义，目标是让一些孩子使用来自数据库的真实值进行初始化。

如果我应该在绑定“真实”数据之前等待循环结束，那很好，但是如何在没有此错误的情况下执行此操作，（请不要使用setTimeout，因为它看起来很垃圾！） .

谢谢

<!--the template if it matter --><somechildtag [data]="data" ></somechildtag>

Answer 1

使用ng-container 加载您的组件。

例如：

    <div *ngIf="data?.length > 0">
        <ng-container *ngComponentOutlet="myChildComponent;
              ngModuleFactory: childComponentsModule;"></ng-container>
    </div>

因此，只有当您的data 对象被填充时，您才会渲染您的孩子。

在您的组件中：

private childComponentsModule: NgModuleFactory<any>;

constructor(private compiler: Compiler){
  this.childComponentsModule = compiler.compileModuleSync(ChildComponentsModule);
}

您可以在此处查看有关如何动态加载组件的更详细示例：

Angular2: Use Pipe to render templates dynamically

Angular 的文档：

https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html