0
votes

Comment envoyer le composant parent de données au composant enfant lorsque vous cliquez sur le bouton qui se trouve à l'extérieur du parent et de l'enfant?

Je ne sais pas si cette méthode est correcte. Mais c'est mon essai ...... Donc, je vais expliquer étape par étape ce que je veux faire. De plus, ce sont des composants différents mais les deux derniers (Bank-Data.componen.ts/Bank-Data.componen.html) ne sont pas des composants différents. Button/DB-data/Bank-Data composant différent

Button.componen.html p >

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

DB-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.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.html strong >

   <button>Click here</button>

Je pourrais obtenir le accountNo et émettre le compte vers Bank-data.component.ts si le bouton avait situé dans Bank-data.component.html . Mais je ne comprenais pas que c'était lorsque je cliquais sur le bouton dans un autre composant. Ensuite, vous voulez obtenir AccountNo et l'afficher dans un autre composant.

C'est cette chose que je veux faire ............
lorsque je clique sur le bouton, je veux obtenir le numéro de compte de DB-Data.componen.ts Contents
Ensuite, ce numéro de compte souhaite afficher Bank-Data.componen.html ici

javascript angular

0 commentaires

3 Réponses :

2
votes

si vous souhaitez partager une variable entre plusieurs composants, le meilleur moyen est d'utiliser les services. mettez le 'account no' dans un service et injectez-le dans chaque composant qui en a besoin, de cette façon tous partagent la même variable.

1 commentaires

Merci pour votre idée.

1
votes

pour transmettre des données d'un composant à un autre composant qui ne partage pas la relation parent enfant, vous pouvez utiliser le service pour mettre à jour les données et récupérer les données.

Ici, vous créez un service, appelez-le DataService: Le code de votre service de données comporterait les lignes suivantes:

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

Maintenant lorsque vous cliquez sur le bouton d'appel.

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

Le composant de DB-Data s'abonnerait à l'indicateur.

Ajoutez donc la ligne suivante dans ce composant.

this.dataService.setDataFlag();

Et dans le composant bankData vous abonnez-vous simplement aux données.

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

3 commentaires

Il dit que "setData" est un identifiant en double

si tel est le cas, changez simplement le nom de la méthode et mettez également à jour le composant. Cela résoudrait l'erreur.

Merci, celui-ci m'a été vraiment utile!

0
votes

Vous avez spécifié un émetteur d'événement @Output. Ces composants ont-ils une relation parent-enfant? Si c'est le cas, vous pouvez jeter un œil ici https://angular.io/guide/component-interaction < / a>. Si ce n'est pas le cas, comme le suggèrent les articles ci-dessus, vous pouvez peut-être utiliser un sujet de comportement pour transmettre les données.

0 commentaires