Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

137
Visualizações
Cómo emitir un objeto con su valor

Tengo un EventEmitter y estoy emitiendo un objeto como se muestra a continuación:

 @Output() cellClick = new EventEmitter(); private _cellClicked(data: any){ let emitData: any = { colId: data.column.colId, rowId: data.node.id, item: {} }; if (emitWithdata){ this.cellClick.next(emitData); // Here i need to send my data also, and it need to append to the value Data.item=data not just the Data object. } if (emitWithNodata){ this.cellClick.next(emitData); // here i just pass the emitData with empty item, which is correct } }

¿Cómo pasar los datos con emitData? ¿Alguna idea chicos? Gracias por adelantado

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Si seguimos la API de Angular EventEmitter:https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html

  1. cambie la declaración de EventEmmiter para usar: EventEmitter
  2. Para enviar los datos tienes que usar el método emmit.

Tu código debería ser así:

 @Output() cellClick: EventEmitter<any> = new EventEmitter(); private _cellClicked(data: any){ let emitData: any = { colId: data.column.colId, rowId: data.node.id, item:{} }; if (emitWithdata){ emitData.item=data; this.cellClick.emit(emitData); // Here i need to send my data also, and it need to append to the value Data.item=data not just the Data object. } }
about 4 years ago · Santiago Trujillo Relatório

0

Para enviar datos de regreso al controlador de eventos, puede escribir así:

 this.cellClick.emit({data : emitData, orderData: someData});
about 4 years ago · Santiago Trujillo Relatório

0

Así es como lo haces a partir de Angular 11. Estoy seguro de que las versiones anteriores son algo similares. Además, puede conocer más detalles leyendo la documentación sobre Vinculación de eventos .

Definitivamente puede usar any objeto declarado sobre la marcha, sin embargo, este ejemplo le mostrará cómo hacerlo usando un objeto fuertemente tipado.

Un objeto fuertemente tipado, declarado en algún lugar de su aplicación:

 export interface MyCustomObject { rowId: number; columnId: number; item: any; }

marcado infantil:

 <div (click)="onCellClicked()"></div>

Archivo TS del componente secundario:

 import { MyCustomObject } from './some-file.models'; @Component({ selector: 'child-component', templateUrl: './child-component.component.html', styleUrls: ['./child-component.component.less'] }) export class ChildComponent implements OnInit { //whatever name you assign this Output variable, //is the event name you'll bind to on the parent markup @Output() cellClicked = new EventEmitter<MyCustomObject>(); constructor() { } public onCellClicked(): void { const obj: MyCustomObject = { rowId: 5; columnId: 24; item: { foo: 'abc' }; } this.cellClicked.emit(obj); } }

Archivo de marcado principal que utiliza el componente secundario:

 <!-- $event param will hold the passed value --> <!-- also notice the use of (cellClicked) as defined by the childs Output variable --> <child-component (cellClicked)="onChildCellClicked($event)"></child-component>

Archivo TS principal:

 import { MyCustomObject } from './some-file.models'; @Component({ selector: 'parent-component', templateUrl: './parent-component.component.html', styleUrls: ['./parent-component.component.less'] }) export class ParentComponent implements OnInit { constructor() { } public onChildCellClicked(event: MyCustomObject): void { //do something on the parent with the data console.log('parent cell click event: ', event); } }
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda