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

Question

我正在升级 Angular 1.5 应用程序，如下 the upgrade guide 。因此，我使用 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，我想知道这是否可能？

Answer 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中使用输出绑定(bind)

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

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

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