我希望我的父组件在子组件中执行方法(绘图组件,它将RaphaelJS对象附加到容器)。但是,我不断收到浏览器错误,说该对象尚未实例化。将方法调用移动到子类可以消除错误,这似乎表明组件正在由父类中的@ViewChild()重新实例化。
我希望父母在孩子中调用绘图方法,我想知道是否有更好的方法来做到这一点。我提出的一些想法是:
通过将我的Raphael初始化移动到ngOnInit()方法然后将父组件中的@ViewChild()调用移动到ngAfterViewInit()方法,我找到了一个解决方案。这样,子组件将有足够的时间完全初始化,并且在父开始调用需要Raphael的子项中的绘制方法之前生成其Raphael对象。
子组件:
@Component({
selector: 'app-g-view',
template:
`<div
id="conP"
class="container-fluid"
style="width:600px;height:600px;"
>
</div>`,
styleUrls: ['./gview.component.css']
})
export class GVComponent implements OnInit, AfterViewInit{
private paper: Raphael;
constructor() {}
ngOnInit() {
this.paper = Raphael("conP", "100%", "100%");
console.log(this.paper);
let border = this.paper.rect(0,0,"100%","100%");
border.attr({fill:"white"});
console.log(border);
}
父组件:
@Component({
selector: 'app-par',
templateUrl: './par.component.html',
styleUrls: ['./par.component.css'],
})
export class ParComponent implements OnInit, AfterViewInit {
@ViewChild(GVComponent) _gv: GVComponent;
constructor(){}
ngAfterViewInit(){
console.log(`testing child component after init: ${this._gv}`);
this._gv.testMethod();
}