Question

我正在将AngularJS应用程序迁移到Angular 4.目前准备迁移，转换为基于组件的架构。

我的问题是如何从父组件调用子组件方法。

我知道在Angular 4中我们可以使用@ViewChild来访问子方法。是否有任何等效的angularjs 1.6或任何其他方法可以帮助更顺利的迁移。

Answer 1

在angularJS中，我们使用$broadcast事件与父控制器与子控制器进行通信。但这是$scope方法。由于角度2会降低范围，因此您无法使用此事件。

问题中已经提到了最佳解决方案。与广播相比，ViewChild允许对用户进行更多控制。所以我建议使用ViewChild

Answer 2

由于Angular2 +事件流使用RxJS可观察对象传递给组件，为了使迁移到Angular 2+更平滑，也可以在AngularJS中使用RxJS observable。

添加rxJS to AngularJS个组件：

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);

app.controller("parentCtrl", function($scope, rx) {
    $scope.subject = new rx.Subject(); 

    $scope.onEvent = function(message) {         
        $scope.subject.onNext(message); 
    };

});

app.component("childComponent", {
    controller: "childCtrl",
    bindings: { subject: "<" },
    template: `<div>{{$ctrl.message}}</div>`
});

app.controller("childCtrl", function(rx) {
    var subscription;
    this.$onChanges = function(changes) {
        if (changes.subject} {
            subscription = subject.subscribe(function onNext(message) {
                console.log(message);
                $ctrl.message = message;
            });
        };
    }; 

    this.$onDestroy = function() {
        if (subscription) {
            subscription.dispose();
        };
    };
});

AngularJs：如何从父组件调用子组件方法

2 个答案: