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