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

Question

我不知道这种方式是否正确。 但这是我的尝试......所以将逐步解释我想要做什么。 这些也是不同的组件，但最后两个（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

Answer 1

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

Answer 2

要将数据从一个组件传输到另一个不共享子父关系的组件，您可以使用该服务来更新数据并获取数据。

因此，您在这里创建了一项服务，称为 DataService：您的数据服务中的代码将包含以下几行：

setData: BehaviorSubject<any> = new BehaviorSubject(false);
data:BehaviourSubject<any>=new behaviourSubject({})
 constructor(){}
  setDataFlag(){
   this.setData.next(true);
  }
  setData(number:any){
      this.data.next(number);
  }

现在，当您单击按钮调用时。

this.dataService.setDataFlag();

DB-Data 的组件将订阅该标志。

因此，在该组件中添加以下行。

this.dataService.setDataFlag.subscribe((data)=>{
   if(data)
   this.dataService.setData(this.AccNo)
    })

在 bankData 组件中，您只需订阅数据。

this.dataService.data.subscribe((data)=>{this.accNo= data})

Answer 3

您指定了一个 @Output 事件发射器。 这些组件是否有父子关系？ 如果他们这样做，那么您可以在这里查看https://angular.io/guide/component-interaction 。 如果他们不这样做，那么正如上面的帖子所建议的那样，也许您可以使用行为主题来传递数据。