首页 文章

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

提问于
浏览 次
2

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

但是有一个组件正在使用 Angular 1 directive ，它会发出一些事件，例如：
$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 component 模板中的某处：

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

该组件需要监听这些事件 . 通常我会做：

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

How can I listen to the events emitted from an Angular 1 directive in an Angular 2 component?

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

angularjs angular

1 回答

  • 3

    找到了解决方案 .

    感谢@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 component 模板中使用myNg1Component（注意输出绑定的Angular 2表示法）

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

相关问题