Angular의 $on 및 $broadcast는 구성 요소 간의 통신을 어떻게 촉진합니까?

Angular의 통신 패턴: $on 및 $broadcast 공개

복잡한 Angular 애플리케이션을 개발할 때 통신할 구성 요소가 필요한 경우가 종종 있습니다. 서로. Angular는 이러한 통신을 용이하게 하는 강력한 메커니즘을 제공하여 구성 요소가 이벤트와 데이터를 교환할 수 있도록 합니다. 이러한 두 가지 메커니즘은 이벤트 기반 상호 작용에서 중요한 역할을 하는 $on과 $broadcast입니다.

$on 및 $broadcast 이해

$on은 애플리케이션의 다른 구성 요소에서 브로드캐스트하는 이벤트를 구독합니다. 이를 통해 구성 요소는 애플리케이션 어디에서나 발생하는 특정 이벤트를 수신하고 반응할 수 있습니다.

반면 $broadcast는 이벤트를 발생시키는 데 사용됩니다. 구성 요소는 $broadcast를 사용하여 $on을 사용하여 구독한 다른 구성 요소에서 수신할 수 있는 이벤트를 보낼 수 있습니다.

예: 컨트롤러 간 이벤트 통신

고려 독립적인 보기가 있는 두 개의 컨트롤러(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는 다음을 사용하여 이 이벤트를 수신합니다. $scope.$on. 이벤트가 트리거되면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!