在 TypeScript 中获取类的父上下文

Question

我有两个类(实际上是一个基类和许多其他类)。我希望获得子类中的父上下文，而不必每次都填充回< code>super()。它的基本目标是把我的角分量分成多个类。我会试着做一个例子

//export.ts
export * from './parent'
export * from './child'

//parent.ts

import {fabric} from 'fabric'
import {Child} from './child'

export class Parent {
    //many other variables here
    canvas:fabric.Canvas = undefined;
    childTest:Child      = undefined;
    width:number         = undefined;
    height:number        = undefined;
    //many other variables here too

    constructor(){

    }

    initCanvas(canvasId:string, options:fabric.ICanvasOptions){
        this.canvas = new fabric.Canvas(canvasId, options);
        //here canvas is populated
        this.childTest = new Child('this is only a test')
    }
}

//child.ts

import { Parent } from './export'
import {fabric} from 'fabric'

export class Child extends Parent {

    constructor(test:string){
      super();
      let rect = new fabric.Rect([0,0, 10, 10], {
        //lots of options here
      })
      this.canvas.add(rect) // returns canvas is undefined
    }
}
// something.component.ts
  import { Component, OnInit, AfterViewInit, Renderer2, ElementRef, Inject} from '@angular/core';
  import { Parent } from '../class/export'
  //some code
  parent:Parent     = undefined
  ngAfterViewInit(){
    this.parent = new Parent();
    this.parent.initCanvas('myCanvas', {
      //a lot of options
    })
  }

如您所见，我无法检索＜code＞这个。canvas并使用它，是否有任何解决方法。我知道我可以将画布传递到方法中，但我更希望像组件中一样使用＜code＞this＜code＞关键字来访问全局上下文。

所以基本上我想做的是：

call ngAfterViewInit()
     |_ call Parent()
     |_ call Parent.initCanvas() from parent and instanciate the canvas variable
         |_ call Child() and retrieve the upper canvas variable instantiated

任何帮助是值得赞赏的。

Answer 1

添加保存画布的 Angular 服务。你有两个选择1。在服务上添加方法，例如：

yourCanvasService.addStuffThatUsedToBeInChild1(..). 

yourCanvasService.addStuffThatUsedToBeInChild2(..).

保留旧的子类，但不要让它们扩展父类。相反，在类构造函数中注入角度服务，然后使用服务更常见的方法。

export class ARectangleClass{
    constuctor(private theService:MyCanvasService){
        theService.addShape();
    }
}

Answer 2

export class Parent {
    protected canvas:fabric.Canvas;
    constructor(){}

    protected initCanvas(canvasId:string, options:fabric.ICanvasOptions){
        this.canvas = new fabric.Canvas(canvasId, options);
        //here canvas is populated
        this.childTest = new Child('this is only a test')
    }
}

和孩子

export class Child extends Parent {

    constructor(test:string){
      super();

    }

    init(canvasId,options){
      this.initCanvas(canvasId);
      let rect = new fabric.Rect([0,0, 10, 10], options)
      this.canvas.add(rect) 
    }

}

并且在组件中

ngAfterViewInit(){
    this.child= new Child();
    this.child.init('myCanvas', {
      //a lot of options
    })
  }