Angular 模板不显示由另一个组件调用的方法生成的数据

Question

I have two components ComponentA and ComponentB

COMPONENT A .ts CODE

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

COMPONENT A .html CODE

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

When I click on the componentA template button I do see the console and the name in the browser.

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

}

COMPONENT B.html CODE

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

But when I click on componentB button, I can see the console.log data, but the name does not appear on the browser. Can anyone tell me what I've not done

Answer 1

The reason is that you are not binding name in ComponentB . With the inheritance from ComponentA , you only get the functionality implemented in component's class, not the template.

In your ComponentB template, you have to do the following:

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

Check this demo as an example, where I have inherited AppComponent in ChildComponent