将对象传递给组件

Question

我创建了一个组件，该组件需要引用为其创建组件的对象。我没能上班，我所有的尝试都失败了。下面，我试着描述一下意图。

组件定义可能如下所示：

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "template.html",
        controller: [
            MyController
        ],
        bindings: {
            myObject: '='
        }
    });

function MyController(myObject) {
    var vm = this;

    vm.myObject = myObject;
}

在一个服务中，我想像这样创建我的对象：

function createMyObject(args) {
        var myObject = {some: data};

        myObject.ref = "<my-component myObject='{{myObject}}'></my-component>";
        return myObject;
    }

问题

如何将数据传递给 angular 组件标签？我是否必须切换回组件指令才能使其工作？

非常感谢任何想法。谢谢。

Answer 1

解决方案 1

在您的模板中：

<my-component key='$ctrl.myObject'></my-component>

在代码中：

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "template.html",
        controller: [
            'objectService'
            MyController
        ],
        bindings: {
            key: '=' // or key: '<' it depends on what binding you need
        }
    });

function MyController(myObject, objectService) {
    var vm = this;

    vm.myObject.whatever(); // myObject is assigned to 'this' automatically
}

解决方案 2 - 通过组件绑定

组件：

angular
.module('myModule')
.component('myComponent', {
    templateUrl: "template.html",
    controller: [
        'objectService'
        MyController
    ],
    bindings: {
        key: '@'
    }
});
function MyController(myObject, objectService) {
    var vm = this;

    vm.myObject = objectService.find(vm.key);
}

用法：

function createMyObject(args) {
    var myObject = {key: ..., some: data};

    myObject.ref = "<my-component key='" + myObject.key + "'></my-component>";
    return myObject;
}

将对象传递给组件

Pass object to component

angularjs

angularjs-directive

angularjs-components