如何在AngularJS控制器中监听Angular 4组件触发的事件

Absolutely! When working on a hybrid Angular (Angular 4+) and AngularJS application, there are a couple of reliable ways to make your AngularJS controllers listen to events (including Observables) fired from Angular components. Let’s walk through the most practical approaches:

1. Shared Service via Angular's Upgrade Module #

This is the most scalable and Angular-idiomatic approach. We’ll create a shared Angular service with an Observable, then expose it to AngularJS using the UpgradeModule so both sides can interact with it.

Step 1: Create the Shared Angular Service #

First, build a service that uses an RxJS Subject to emit and listen for events:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class CrossVersionEventService {
  // Subject to emit events
  private eventStream = new Subject<any>();
  // Observable for subscribers to listen to
  public event$ = this.eventStream.asObservable();

  // Method to trigger events from Angular components
  emitEvent(payload: any): void {
    this.eventStream.next(payload);
  }
}

Step 2: Expose the Service to AngularJS #

In your Angular root module, use UpgradeModule to register the service with AngularJS’s dependency injector:

import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { CrossVersionEventService } from './cross-version-event.service';

@NgModule({
  providers: [CrossVersionEventService]
})
export class AppModule {
  constructor(
    private upgrade: UpgradeModule,
    private crossVersionEventService: CrossVersionEventService
  ) {
    // Register the service with AngularJS
    this.upgrade.injector.get('$provide').value(
      'crossVersionEventService',
      this.crossVersionEventService
    );
  }

  ngDoBootstrap() {} // Required for hybrid apps
}

Step 3: Emit Events from Angular 4+ Component #

Use the service to fire events from your Angular component:

import { Component } from '@angular/core';
import { CrossVersionEventService } from './cross-version-event.service';

@Component({
  selector: 'app-angular-feature',
  template: `<button (click)="sendToAngularJS()">Send Event to AngularJS</button>`
})
export class AngularFeatureComponent {
  constructor(private eventService: CrossVersionEventService) {}

  sendToAngularJS(): void {
    this.eventService.emitEvent({
      type: 'data-update',
      content: 'New data from Angular 4+'
    });
  }
}

Step 4: Listen for Events in AngularJS Controller #

Inject the shared service into your AngularJS controller and subscribe to the Observable:

angular.module('angularJsApp')
  .controller('LegacyController', ['crossVersionEventService', '$scope', 
  function(crossVersionEventService, $scope) {
    // Subscribe to the event stream
    const eventSubscription = crossVersionEventService.event$.subscribe(event => {
      // Handle the incoming event
      console.log('Event received in AngularJS:', event);
      
      // Update AngularJS scope (use $apply to trigger digest cycle)
      $scope.$apply(() => {
        $scope.latestEvent = event;
      });
    });

    // Clean up subscription to prevent memory leaks
    $scope.$on('$destroy', () => {
      eventSubscription.unsubscribe();
    });
  }]);

2. Use AngularJS $rootScope as an Event Bus #

For simpler use cases, you can leverage AngularJS’s $rootScope to broadcast events from Angular components, which AngularJS controllers can listen to directly.

Emit Event from Angular Component #

Use UpgradeModule to access AngularJS’s $rootScope and broadcast an event:

import { Component } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';

@Component({
  selector: 'app-simple-angular-component',
  template: `<button (click)="broadcastEvent()">Broadcast to AngularJS</button>`
})
export class SimpleAngularComponent {
  constructor(private upgrade: UpgradeModule) {}

  broadcastEvent(): void {
    const $rootScope = this.upgrade.injector.get('$rootScope');
    // Broadcast the event to all AngularJS scopes
    $rootScope.$broadcast('angular-to-angularjs-event', { message: 'Hi from Angular!' });
    // Trigger AngularJS digest cycle if needed
    $rootScope.$apply();
  }
}

Listen in AngularJS Controller #

Listen to the broadcasted event using $rootScope.$on:

angular.module('angularJsApp')
  .controller('SimpleLegacyController', ['$rootScope', '$scope', 
  function($rootScope, $scope) {
    $rootScope.$on('angular-to-angularjs-event', (event, payload) => {
      console.log('Event received:', payload);
      $scope.eventMessage = payload.message;
    });
  }]);

Key Notes #

• Memory Leaks: Always unsubscribe from Observables when your AngularJS controller is destroyed (using $scope.$on('$destroy', ...)).
• Digest Cycle: When updating AngularJS scope from an Angular Observable or event, use $scope.$apply() to trigger AngularJS’s dirty checking, since Angular’s events run outside AngularJS’s digest cycle by default.
• Best Practice: Prefer the shared service approach for larger apps—it’s more maintainable, testable, and aligns with Angular’s reactive patterns. The $rootScope event bus works well for small, one-off events.

内容的提问来源于stack exchange，提问作者Kalyan