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

Question

我有两个组件 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>

当我单击 componentA 模板按钮时，我确实在浏览器中看到了控制台和名称。

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

}

组件 B.html 代码

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

但是当我点击componentB按钮时，我可以看到console.log数据，但是浏览器上没有显示名称。 谁能告诉我我没有做过什么

Answer 1

原因是您没有在ComponentB绑定name 。 通过从ComponentA继承，您只能获得在组件类中实现的功能，而不是模板。

在您的ComponentB模板中，您必须执行以下操作：

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

勾选此演示作为一个例子，在那里我继承AppComponent在ChildComponent