angularjs - reactivos - tablas angular 4

Pase el objeto al componente

Question

Creé un componente que necesita tener una referencia al objeto para el cual se creó el componente. No hice el trabajo y todas mis pruebas han fallado. A continuación, intento describir la intención.

La definición del componente se vería así:

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

function MyController(myObject) {
    var vm = this;

    vm.myObject = myObject;
}

En un servicio, me gustaría crear mi objeto de esta manera:

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

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

Pregunta

¿Cómo puedo pasar los datos a la etiqueta de componente angular? ¿Debo volver a una directiva de componentes para que funcione?

Cualquier idea es muy apreciada. Gracias.

Answer 1

Solución 1

En tu plantilla:

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

En codigo:

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
}

Solución 2: mediante enlaces de componentes

Componente:

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);
}

Uso:

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

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