如何在 Angular 混合应用程序中的组件之间进行通信？答案

【问题标题】：How to communicate between components in Angular hybrid app?如何在 Angular 混合应用程序中的组件之间进行通信？
【发布时间】：2016-11-24 15:02:23
【问题描述】：

我正在升级 the upgrade guide 之后的 Angular 1.5 应用程序。因此，我使用UpgradeAdapter 引导了一个混合应用程序，并在 Angular 2 中实现了我的组件。这些组件通过类似于this suggestion 的SharedService 进行通信。

但是，一个组件正在使用 Angular 1 指令，它会发出一些事件，例如：
$scope.$emit('somethingHappened')

在我的 index.ts 中：

angular.module('myModule', [
        require('my-ng1-directive')
        //...
])
//...
.component('myNg1Component', {
        template: '<my-ng1-directive address="{{$ctrl.address}}"></my-ng1-directive>',
        bindings: {
             address: '@'
        }
})

指令已升级并提供给我的应用程序的根模块：

@NgModule({
    imports: [
        //...
    ],
    declarations: [
        upgradeAdapter.upgradeNg1Component('myNg1Component')
    ],
    providers: [
        SharedService
    ]
})
export class AppModule { }

在我的 Angular 2 组件 模板中的某处：

<my-ng1-component address="{{someAddress}}"></my-ng1-component>

这个组件需要监听这些事件。通常我会这样做：

$scope.$on('somethingHappened', function () {
    // do something
})

如何在 Angular 2 组件中监听 Angular 1 指令发出的事件？

由于 Angular 2 中没有 $scope，我想知道这是否可能？

【问题讨论】：

您是否尝试过使用 @Input() 绑定监听 angular 1 指令事件？不确定这是否可行。重构以通过共享服务也传递事件？
你能解释得更详细一点吗？我不太明白。我可以尝试通过sharedService 传递事件，但我想保持模块化。 my-ng1-directive 被封装为一个自己的模块，根本不应该知道sharedService。
我不确定这是否可能。我建议坚持使用& 绑定进行通信，或者通过< 绑定传递事件发射器实例，因为这些是两个框架共享的惯用方法。
@estus 感谢它确实有效，请参阅我的回答。
好的，不客气。

标签： angularjs angular

【解决方案1】：

找到了解决办法。

感谢@estus 的提示。

index.ts

angular.module('myModule', [
        require('my-ng1-directive')
        //...
])
//...
.component('myNg1Component', {
        template: '<my-ng1-directive address="{{$ctrl.address}}" on-something-happened="$ctrl.somethingHappened()"></my-ng1-directive>',
        bindings: {
             address: '@',
             onSomethingHappened: '&'
        },
        controller: function() {
            this.somethingHappened = function() {
                this.onSomethingHappened(); // "trigger" the output
            };
        }
})

在myNg1.directive.js中使用输出绑定

// ...
bindToController: {
    address: '@',
    onSomethingHappened: '&'
},
controller: function() {
    // "trigger" the output somewhere in the controller
    this.onSomethingHappened();
}

在 Angular 2 组件 模板中使用 myNg1Component（注意输出绑定的 Angular 2 表示法）

<my-ng1-component address="{{someAddress}}" (onSomethingHappened)="doSomething()"></my-ng1-component>

【讨论】：