Bagaimanakah $on dan $broadcast Mendayakan Komunikasi Acara dalam Angular?

Komunikasi Acara dengan $on dan $broadcast dalam Angular

Angular menyediakan dua kaedah komunikasi acara asas, $on dan $broadcast, yang membenarkan komponen dalam aplikasi berkomunikasi antara satu sama lain. Memahami cara kaedah ini berfungsi adalah penting untuk pengendalian acara yang berkesan dalam aplikasi Sudut.

$broadcast
Apabila peristiwa berlaku dalam pengawal, seperti mengklik elemen dalam footer.html dalam footerController, ia boleh disiarkan ke bahagian lain aplikasi menggunakan $broadcast. Kaedah ini mengambil nama acara dan argumen pilihan sebagai parameter.

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

$on
Komponen lain boleh melanggan acara ini menggunakan $on. Kaedah ini mengambil nama acara dan fungsi panggil balik sebagai parameter. Apabila acara disiarkan, fungsi panggil balik dicetuskan, memberikan akses kepada sebarang hujah yang diluluskan dengan $broadcast.

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

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

Contoh
Pertimbangkan codeScannerController yang memerlukan acara startScanner untuk mula mengimbas kod. FooterController boleh mencetuskan peristiwa ini apabila elemen diklik.

<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>

Penggunaan
$on dan $broadcast biasanya digunakan untuk memudahkan komunikasi antara komponen yang berbeza, seperti antara pengawal, perkhidmatan dan arahan. Ia membenarkan peristiwa dicetuskan dan dikendalikan merentas aplikasi, membolehkan reka bentuk yang digandingkan secara longgar.

Atas ialah kandungan terperinci Bagaimanakah $on dan $broadcast Mendayakan Komunikasi Acara dalam Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!