Angular の $on と $broadcast はコンポーネント間の通信をどのように促進しますか?

Angular の通信パターン: $on と $broadcast の公開

複雑な Angular アプリケーションを開発する場合、コンポーネントが通信する必要があることがよくあります。お互い。 Angular は、この通信を促進する堅牢なメカニズムを提供し、コンポーネントがイベントとデータを交換できるようにします。そのような 2 つのメカニズムは、$on と $broadcast で、イベントベースのインタラクションで重要な役割を果たします。

$on と $broadcast について

$on は、次のメソッドです。アプリケーション内の他のコンポーネントによってブロードキャストされるイベントをサブスクライブします。これにより、コンポーネントはアプリケーション内の任意の場所で発行される特定のイベントをリッスンして反応することができます。一方、

$broadcast はイベントの発行に使用されます。コンポーネントは、$broadcast を使用して、$on を使用してサブスクライブしている他のコンポーネントが受信できるイベントを送信できます。

例: コントローラー間のイベント通信

検討してください独立したビューを持つ 2 つのコントローラー footerController と codeScannerController があるシナリオ。 footerController で特定のアクションが発生したときに、codeScannerController でイベントをトリガーしたいとします。

これを実現するには、次のように $broadcast と $on を使用できます。

footerController.js 内:

<code class="javascript">$scope.startScanner = function() {
    $rootScope.$broadcast('scanner-started');
};</code>

codeScannerController.js 内:

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

この例では、footerController は $rootScope.$broadcast を使用して「scanner-started」イベントをトリガーし、codeScannerController は次を使用してこのイベントをリッスンします。 $スコープ.$オン。イベントがトリガーされると、codeScannerController はコールバック関数を実行し、「スキャナーが開始されました」というメッセージをログに記録します。

イベントでの引数の受け渡し

$broadcast では、追加の引数を渡すことができます。イベントと一緒に。これらの引数は、受信コンポーネントにコンテキストまたはデータを提供するために使用できます。引数を渡す場合:

<code class="javascript">$rootScope.$broadcast('scanner-started', { scannerID: 123 });</code>

コールバック関数で引数を受け取る場合:

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

結論

$on と $broadcast はAngular アプリケーションでイベント駆動型通信を実装するための強力なツール。これらのメカニズムを理解することで、開発者は効果的に相互作用できる分離されたコンポーネントを作成できるようになり、コードの保守性とスケーラビリティの向上につながります。

以上がAngular の $on と $broadcast はコンポーネント間の通信をどのように促進しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。