AngularJS与Angular 2+组件之间是否可实现通信？

Hey there! Great questions—mixing AngularJS (1.x) and Angular 2+ is super common during app migrations, so let’s break down how this works clearly.

一、AngularJS 与 Angular 2 之间是否存在通信可能性？ #

Absolutely yes! The Angular team built the Upgrade Module specifically to handle interoperability between these two frameworks. This tool lets both run side-by-side in the same app and communicate seamlessly in both directions:

• AngularJS → Angular 2+: You can "upgrade" AngularJS components/services to be usable in Angular, or share data via cross-framework services.
• Angular 2+ → AngularJS: You can "downgrade" Angular components/services so they fit right into AngularJS templates and code.

二、AngularJS 应用新增 Angular 2+ 组件后，二者能否实现通信？ #

Definitely—this is exactly what the Upgrade Module was made for. Here are the most reliable, practical ways to get them talking:

1. Component Wrappers via Upgrade Module #

Downgrade Angular 2+ Components for AngularJS

Wrap your Angular component so it behaves like a native AngularJS directive. You can pass data through inputs and listen to outputs just like you would with regular AngularJS components.
Example snippet:

// Angular 2+ component
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'angular-demo-component',
  template: `
    <p>Angular Component: {{inputData}}</p>
    <button (click)="sendToAngularJS()">Send Message to AngularJS</button>
  `
})
export class AngularDemoComponent {
  @Input() inputData: string;
  @Output() onMessage = new EventEmitter<string>();

  sendToAngularJS() {
    this.onMessage.emit('Hey from Angular!');
  }
}

// Downgrade to AngularJS directive
import { downgradeComponent } from '@angular/upgrade/static';
angular.module('myAngularJSApp')
  .directive('angularDemoComponent', downgradeComponent({ component: AngularDemoComponent }) as angular.IDirectiveFactory);

Use it in your AngularJS template:

<angular-demo-component 
  input-data="angularJsScopeData" 
  on-message="handleAngularMessage(msg)"
></angular-demo-component>

Upgrade AngularJS Components for Angular

Wrap an existing AngularJS component so you can use it in Angular templates. This lets you pass data from Angular to AngularJS and react to events from the AngularJS component.

2. Shared Cross-Framework Services #

Create a service in one framework and make it available to the other using the Upgrade Module’s injector. This is perfect for sharing state or business logic across both parts of your app.
Example of a shared service:

// Angular service with RxJS for event streaming
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class SharedDataService {
  private messageStream = new Subject<string>();
  public message$ = this.messageStream.asObservable();

  sendMessage(message: string) {
    this.messageStream.next(message);
  }
}

// Downgrade the service for AngularJS
import { downgradeInjectable } from '@angular/upgrade/static';
angular.module('myAngularJSApp')
  .factory('sharedDataService', downgradeInjectable(SharedDataService) as angular.InjectableFactory);

Now both AngularJS controllers and Angular components can inject this service to send and receive messages.

3. Event Bus (Decoupled Alternative) #

If you want a looser coupling, you can use a simple event bus (like the RxJS Subject above) or even AngularJS’s $rootScope events. Just be careful with $rootScope—overusing it can lead to messy, hard-to-maintain code.

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