时间戳

首页 > 解决方案 > 单击父子组件之外的按钮时，如何将数据父组件发送到子组件？

javascript - 单击父子组件之外的按钮时，如何将数据父组件发送到子组件？

问题描述

我不知道这种方式是否正确。但这是我的尝试......所以将逐步解释我想要做什么。这些也是不同的组件，但最后两个（Bank-Data.componen.ts/Bank-Data.componen.html）不是不同的组件。Button/DB-data/Bank-Data不同组件

Button.componen.html

   <button>Click here</button>

DB-Data.componen.ts

@Output() accNo= new EventEmitter<any>();

async onSubmit(cusData): Promise<any>{
 //Here is some data come from database......
   this.accountNo = '008974629'; //This value want to send to another component!
   this.accNo.emit(this.accountNo );
}

银行数据.componen.ts

class LectureHallComponent implements OnInit {
 public showaccountNo; //bind the accountNo with this variable

 //execute the function and show the accountNo
 getLectureID(event){
 debugger;
 this.showaccountNo= event;
 }
}

Bank-Data.componen.html

 AccountNo: <span *ngIf="showaccountNo"><b>{{showaccountNo}}</b></span> //show the AccountNo

如果按钮位于Bank-data.component.html 中，我可以获得 accountNo 并将该帐户发送到Bank -data.component.ts。但是当单击另一个组件中的按钮时，我不明白该怎么做。然后想要获取 AccountNo 并将其显示在另一个组件中。

  1. 这就是我想做的事情…………
  2. 当我单击按钮时，我想从DB-Data.componen.ts获取帐号
  3. 然后那个账号想在这里显示Bank-Data.componen.html

标签： javascriptangular

解决方案

如果你想在多个组件之间共享一个变量，最好的方法是通过服务。将“帐号”放入服务中并将其注入到需要它的每个组件中，这样它们都共享相同的变量。

推荐阅读