组件之间的AngularJS通过模板进行通信(带有承诺）

AngularJS communication between components through a template (with a promise)

本文关键字：通信 承诺 之间 AngularJS 组件      更新时间：2023-09-26

我正在开发一个有演员列表的应用程序。后端有具有多对多关系的标签和参与者。

我有 2 个组件，我想通过模板在它们之间传递未解决的承诺。

这是角色-标签-细节组件：

angular.module('actorTagDetail').component('actorTagDetail', {
    templateUrl: 'static/partials/actor-tag-detail/actor-tag-detail.template.html',
    controller: ['$routeParams', 'ActorTag',
        function ActorTagDetailController($routeParams, ActorTag) {

            var self = this; 
            self.actorTag = ActorTag.get({actorTagId: $routeParams.actorTagId})
        }
    ]
});

actorTag 从后端返回 ActorTag 对象的 JSON，如下所示：

{ "id"： 37， "名字"： "奥斯卡奖得主"， "演员"：[ 664, 668, 670, 673, 678, 696 ] }

我还有一个演员列表组件，负责从后端检索演员列表：

angular.module('actorList').component('actorList', {
    templateUrl: 'static/partials/actor-list/actor-list.template.html',
    bindings: {
        pk: '='
    },
    controller: ['Actor',
        function ActorListController(Actor) {
            var self = this;
            alert(self.pk)
            self.actors = Actor.query();  
            self.orderProp = 'name';
        }
    ]
});

在角色标签详细信息的模板中，我正在尝试将属性传递给参与者列表组件。

actor-tag-detail.template.html：

<actor-list pk="$ctrl.actorTag.actors"></actor-list>

我试图实现的是访问参与者列表组件中检索到的 JSON 数据。但是，当我尝试在actor-list.component中alert(self.pk)时，我得到一个"未解决的对象错误"而不是所需的结果，这是因为当alert(self.pk)运行时，数据尚未从后端检索。我不知道如何纠正这种情况。有没有办法在接收组件中指定等待执行，直到解析承诺和从后端接收数据？

或者，我是否完全错了，并且有更好的方法可以在组件之间传递此信息？

使用观察程序监听对象更改：

function ActorListController($scope, Actor) {
    var self = this;
    $scope.$watch(function() {
        return self.pk;
    }, function(newValue, oldValue) {
        if(angular.isObject(newValue) {
            //alert(self.pk)
            self.actors = Actor.query();  
        }
    }
}
相关文章：