在 TypeScript 中获取类的父上下文

Question

我有 2 个类（实际上是一个基类和许多其他类）。 我想在子类中获取父上下文，而不必每次都返回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
    })
  }

如您所见，我无法检索 this.canvas 并使用它是否有任何解决方法。我知道我可以将画布传递给方法，但我更喜欢在组件中使用 thiskeyword 来访问全局上下文。

所以基本上我想做的是：

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(..).

1. 保留旧的 Child 类，但不要让它们扩展 Parent。而是在类构造函数中注入 Angular 服务，然后使用该服务更常用的方法。

   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
    })
  }