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

我正在升级一个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 { }

某处在我角2组件模板：

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

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

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

我怎么能听在角2组件从1个发出指令的事件？

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

来源

2016-11-24 lenny

您是否尝试过使用@Input（）绑定侦听angular 1指令事件？不知道这是否会奏效。重构也可以通过共享服务传递事件？ – RobSeg

你可以更详细地解释你的意思吗？我不太明白。我可以尝试通过'sharedService'传递事件，但我想保持它的模块化。 'my-ng1-directive'封装为一个自己的模块，根本不应该知道'sharedService'。 – lenny

我不确定这是否可行。我建议坚持通过'＆'绑定，或者通过'<'绑定传递事件发射器实例，因为这些是两个框架共享的惯用方法。 – estus

找到了解决办法。

感谢@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(); 
}

使用输出绑定使用myNg1Component在角2成分模板（通知出来的Angular 2符号把绑定）

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

来源

2016-11-25 12:53:46 lenny

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

回答

相关问题