如何阻止Angular @ViewChild()创建新的组件实例?

问题描述 投票:-2回答:1

我希望我的父组件在子组件中执行方法(绘图组件,它将RaphaelJS对象附加到容器)。但是,我不断收到浏览器错误,说该对象尚未实例化。将方法调用移动到子类可以消除错误,这似乎表明组件正在由父类中的@ViewChild()重新实例化。

我希望父母在孩子中调用绘图方法,我想知道是否有更好的方法来做到这一点。我提出的一些想法是:

  • 将子类实现为服务
  • 创建一个非Angular-ee静态类或单例,然后调用它
  • 重做子类以将其所有对象存储在服务中并在每个ngOnInit()上重绘所有这些对象
angular oop raphael
1个回答
0
投票

通过将我的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();
}
© www.soinside.com 2019 - 2024. All rights reserved.