Maison > Article > interface Web > Comment déclencher un événement dans un composant de pied de page et le gérer dans un composant de scanner de code à l'aide de $broadcast et $on d'Angular ?
Diffusion et gestion des événements avec $broadcast et $on dans Angular
Comprendre le problème
La gestion des événements d'Angular est un aspect fondamental de la communication entre les composants. Ce scénario particulier implique le déclenchement d'un événement dans un composant de pied de page et sa gestion dans un composant d'analyseur de code. La question explore comment y parvenir en utilisant $broadcast et $on.
Utilisation de $broadcast pour l'émission d'événements
Dans le contrôleur du composant de pied de page, $rootScope peut être utilisé pour la diffusion d'événements :
<code class="javascript">$scope.startScanner = function() { $rootScope.$broadcast('scanner-started'); }</code>
Cette ligne émet un événement nommé « scanner-started » lorsque vous cliquez sur le bouton dans le pied de page.
Utilisation de $on pour l'écoute d'événements
Dans le contrôleur du composant scanner de code, le $scope peut être utilisé pour écouter l'événement diffusé :
<code class="javascript">$scope.$on('scanner-started', function(event, args) { // Handle event });</code>
Cet écouteur d'événement sera déclenché à chaque fois que l'événement « démarré par le scanner » est émis.
Passer des arguments avec $broadcast
Les arguments peuvent être transmis avec l'événement diffusé en utilisant la méthode $broadcast :
<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>
Récupération des arguments dans $on
Les arguments transmis peuvent être récupérés dans l'écouteur d'événement $on :
<code class="javascript">$scope.$on('scanner-started', function(event, args) { var anyThing = args.any; // Handle event });</code>
Considérations supplémentaires
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!