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

Question

我有一个组件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' };

}

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

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

Answer 1

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

您仍然需要在代码周围使用if，以确保在首次加载组件时看不到未定义的内容。