Question

我正在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，我想知道这是否可行？

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

中使用输出绑定

// ...
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>

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

1 个答案: