Блог

У меня есть два компонента ComponentA и ComponentB

КОМПОНЕНТ A .ts КОД

 export class ComponentA implements OnInit {
 name: string;
 constructor() {}
 
 showName(){ 
    this.name = "Timothy";
    console.log('inside showName'   this.name);
 }
}
  

КОМПОНЕНТ A .html-КОД

  <button (click)="showName()">Click to see the name</button>    <div *ngIf="name?.length>0">{{name}}</div>
  

Когда я нажимаю на кнопку шаблона компонента, я вижу консоль и имя в браузере.

 export class ComponentB extends ComponentA  implements OnInit {
  constructor() { 
   super();
 }
  

}

КОМПОНЕНТ B.html КОД

 <button (click)="showName();">Show The Name</button>
  

Но когда я нажимаю на кнопку ComponentB, я вижу консоль.данные журнала, но имя не отображается в браузере. Кто-нибудь может сказать мне, чего я не сделал

Причина в том, что вы не привязываетесь name ComponentB . При наследовании от ComponentA вы получаете только функциональность, реализованную в классе компонента, а не в шаблоне.

В вашем ComponentB шаблоне вам необходимо выполнить следующее:

 <button (click)="showName();">Show The Name</button>
<div *ngIf="name?.length>0">{{name}}</div>
  

Проверьте эту демонстрацию в качестве примера, где я унаследовал AppComponent в ChildComponent