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

Question

I dont know that this way is right. But this is my try......So will explain step by step what i want to do. As a well as these are differant component but last two (Bank-Data.componen.ts/Bank-Data.componen.html) is not different component. Button/DB-data/Bank-Data different component

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 );
}

Bank-Data.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

---

I could get the accountNo & emit the account to Bank-data.component.ts if button had located in Bank-data.component.html . But i didn't understand it to do when click the button in another component. Then want to get AccountNo and show it in a another component.

1. This this thing that i want to do............
2. when i click the button i want get account no from DB-Data.componen.ts
3. Then that account number want to display Bank-Data.componen.html here

Answer 1

if you want to share a variable between multiple components, the best way is via Services. put the 'account no' in a service and inject it into each component that needs it, this way all of them share the same variable.

Answer 2

to transmit data from one component to another component which don't share child parent relation, you can use the service to update the data and fetch the data.

So here you create one service call it DataService: The code in your data service would have the following lines:

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

Now in when you click the button call.

this.dataService.setDataFlag();

The componet of DB-Data would subscribe to the flag.

So add the following line in that component.

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

And in the bankData component you just subscribe the data.

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

Answer 3

You specified an @Output event emitter. Does these components have a parent child relationship? If they do then you can have a look here https://angular.io/guide/component-interaction . If they don't, then as the posts above suggest, perhaps you can use behaviour subject to pass the data.