getting parent context of a class in TypeScript

Question

I have 2 classes (in reality one base class and many others). I would like to get the parent context in child class without having to populate back super()every time. The base aim of that it to split my angular component into multiple classes. I will try make an example

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

so as you can see I cannot retrieve this.canvas and work with it is there any workarounds. I know I could pass the canvas into the method but I would prefer just like in a component to use the thiskeyword to access a global context.

so basically what I would like to do is:

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

Any help is appreciated.

you set canvas:fabric.Canvas = undefined; so offcourse it will be undefined until you don'tcall initCanvas method in your parent class — jitender
– jitender, Commented Aug 26, 2019 at 4:06
sorry I've forgot to add the component. thanks for the comment — JSmith
– JSmith, Commented Aug 26, 2019 at 4:06
So you are calling this.parent.initCanvas from some something component and you want this.canvas to not be undefined in your child class? — jitender
– jitender, Commented Aug 26, 2019 at 4:16
@jitender I want a global context. I init a Parent class with all the main variables then access some variables in the child classes. I don't see why instantiating the class inside a component should be a problem. Many thanks in advance — JSmith
– JSmith, Commented Aug 26, 2019 at 4:18

Jens Alenius · Accepted Answer · 2019-08-26 08:27:01Z

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

And the child

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

}

and in Component

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

edited Aug 26, 2019 at 8:27

answered Aug 26, 2019 at 7:01

Jens Alenius

1,9412 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

JSmith Over a year ago

Many thanks for your answer .Sorry but I really don't understand the logic. I've done class to avoid setting everything in the component. in your example I'm doing everything back as it was before. there must be a way to create a global context and split component into different files and keeping the context

Jens Alenius Over a year ago

Ok sorry I just changed the code so it made use of the parent class In standard way. And with my changes, canvas would be set. Is it the canvas you would like to be global?

JSmith Over a year ago

Ok sorry I must explain myself badly. The main Idea is for example. When I use the this keyword on a component I have access to it in all the functions. Now I want to split my component into classes and use the this of my base class into my child. So if my this.canvas is instantiated in my parent I would like to use it into my child class, just as I would use a canvas global variable into my component. Many thanks in advance

Jens Alenius Over a year ago

Yes in my example you need to call this.initCanvas specific in the childs ngAfterViewInit. You would like to avoid that? I Think a know away if that is the issue

JSmith Over a year ago

ngAfterViewInit() is not a child it's upper. call order is (ngAfterViewInit(Parent(Child()))) where the context of parent is retrieved in the child with an instantiated canvas

|

Jens Alenius · Accepted Answer · 2019-08-26 09:40:38Z

1

Add an Angular service that holds the canvas. You got two options 1. Add methods on the service like:

yourCanvasService.addStuffThatUsedToBeInChild1(..). 

yourCanvasService.addStuffThatUsedToBeInChild2(..).

Keep the old Child classes but don let them extend Parent. Instead inject the Angular Service in the classes constuctor and THEN use the service more common methods.
```
export class ARectangleClass{
    constuctor(private theService:MyCanvasService){
        theService.addShape();
    }
}
```

answered Aug 26, 2019 at 9:40

Jens Alenius

1,9412 gold badges17 silver badges20 bronze badges

1 Comment

Jens Alenius Over a year ago

If you would get any problems with keeping the actual canvas int the service, then just store a model in the service so the canvas can paint itself from it

Collectives™ on Stack Overflow

getting parent context of a class in TypeScript

2 Answers 2

14 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related