Wie ermöglichen $on und $broadcast die Ereigniskommunikation in Angular?

Ereigniskommunikation mit $on und $broadcast in Angular

Angular bietet zwei grundlegende Ereigniskommunikationsmethoden, $on und $broadcast, die es Komponenten innerhalb einer Anwendung ermöglichen, zu kommunizieren miteinander. Für eine effektive Ereignisbehandlung in Angular-Anwendungen ist es von entscheidender Bedeutung, zu verstehen, wie diese Methoden funktionieren.

$broadcast
Wenn ein Ereignis in einem Controller auftritt, beispielsweise das Klicken auf ein Element in „footer.html“. Wenn Sie den FooterController verwenden, kann er mithilfe von $broadcast an andere Teile der Anwendung gesendet werden. Diese Methode verwendet einen Ereignisnamen und optionale Argumente als Parameter.

<code class="javascript">$rootScope.$broadcast('scanner-started');</code>

$on
Andere Komponenten können diese Ereignisse mit $on abonnieren. Diese Methode akzeptiert einen Ereignisnamen und eine Rückruffunktion als Parameter. Wenn das Ereignis gesendet wird, wird die Rückruffunktion ausgelöst, die Zugriff auf alle mit $broadcast übergebenen Argumente bietet.

<code class="javascript">$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});</code>

Beispiel
Betrachten Sie den codeScannerController, für den ein startScanner-Ereignis erforderlich ist Beginnen Sie mit dem Scannen eines Codes. Der footerController kann dieses Ereignis auslösen, wenn auf ein Element geklickt wird.

<code class="javascript">// In footerController
$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started', { any: {} });
}

// In codeScannerController
$scope.$on('scanner-started', function(event, args) {

    var anything = args.any;
    // do what you want to do
});</code>

Verwendung
$on und $broadcast werden häufig verwendet, um die Kommunikation zwischen verschiedenen Komponenten zu erleichtern, z. B. zwischen Controller, Dienste und Richtlinien. Sie ermöglichen das Auslösen und Behandeln von Ereignissen in der gesamten Anwendung und ermöglichen so ein lose gekoppeltes Design.

Das obige ist der detaillierte Inhalt vonWie ermöglichen $on und $broadcast die Ereigniskommunikation in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!