如何在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混合應用程序中的組件之間進行通信？

回答

相關問題