I've encountered a problem with typescript. schematically, I have :
parent abstract class A.
child class B.
child class C.
export abstract class BasePage {
public value = 1;
}
@Component({...}) // selector, template ...
export class A extends BasePage{
constructor(){}
editValue(){
this.value = 3;
}
}
@Component({...}) // selector, template ...
export class B extends BasePage{
constructor(){}
}
<!-- B template -->
<p> Parent abstract value : {{ value }}<!-- still remain 1 --> </p>
In parent class A, I have the property "value" which is used in both child classes. But it doesn't refresh in the B class when I launch editValue() in A class simultaneously.
May be the answer of your question lies in the explanation how javascript understands subclass and parent class, when you call
editValue(){
this.value = 3;
}
this function the "this" belongs to the class A not to the BaseClass,
Also in TS when you extend a class you need to call super() in the constructor which will initialise value as 1, next time when you call the editValue you are essentially changing the class property not the parent class property
look how TS is converted in JS from this example from TS playground,
here you are dealing with different objects