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

Posted 2023-02-23

【中文标题】Angular模板不显示由另一个组件调用的方法生成的数据

【英文标题】：Angular template not displaying data generatd by a method called from another component

【发布时间】：2021-01-17 08:08:21

【问题描述】：

我有两个组件 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数据，但是浏览器上没有出现名字。谁能告诉我我没做过什么

【参考方案1】：

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

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

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

以demo为例，我在ChildComponent中继承了AppComponent

【讨论】：

我希望在单击 ComponentB 按钮时显示在 ComponentA 模板中的名称。我不想在 ComponentB 模板中显示名称