Why child class doesnt refresh value of another child class Angular

user_12517800 0
Viewed 75

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.

angular typescript html javascript
1 Answers

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,

enter image description here

here you are dealing with different objects

user_29359530
Related