嵌套子组件未定义的输入属性答案

【问题标题】：Nested child components undefined input properties嵌套子组件未定义的输入属性
【发布时间】：2017-07-08 00:14:34
【问题描述】：

我有一个以dataModel 作为输入的组件，在调用构造函数时dataModel 未定义。

<div class="container">
    <dataViewer [dataModel]="data"></dataViewer>
</div>

组件

@Input() dataModel: DataModel;

// ..

constructor(private element: ElementRef) {
   this.htmlElement = this.element.nativeElement;
   this.selectorElement = d3.select(this.element.nativeElement);

   if (this.dataModel== undefined) { throw 'dataModel is undefined' };

}

父组件有路由解析器，如何确保在构造dataViewer组件时设置了dataModel？我可以延迟任何子组件的构建以确保它不是未定义的吗？

this.route.data
            .subscribe(( data: { foo: Bar[] }) => {
                self.foo = foo;
            });

【问题讨论】：

父组件是否在初始化dataModel？如果不是，它是如何初始化的？

标签： angular

【解决方案1】：

考虑将代码从构造函数移到嵌套组件的 ngOnChanges 事件中。该事件将在设置或更改 dataModel 属性时发生。

您仍然需要在代码周围加上 if 以确保在首次加载组件时不会看到 undefined。

【讨论】：