Búsqueda de sitios web

typescript - ¿Cómo pasar datos a un componente de Angular usando el componente de diálogo de Nebular?

Estoy intentando enviar mis objectData desde un componentA a DialogComponent para editar la información del objeto.

ComponentA abre el diálogo y pasa los datos de esta manera:

export class ComponentA implements OnInit {
  constructor(private dialogService: NbDialogService) {}
  openDialog(data) {
    this.dialogService.open(DialogComponent, {
      context: {
        product: data,
      },
    });
  }
}

el DialogComponent de Nebular es como:

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and turn into it, within the dialogue.

  constructor(
    private ref: NbDialogRef<DialogComponent>,
    private dataService: DataService,
  ) {
  }
  navigateToComponentB() { 
    this.dataService.data = this.preSaleItem;
    this.router.navigate(['/pages/componentB']);
    this.close();
  }

  close() {
    this.ref.close();
  }

en el diálogo llenará el preSaleItem con nueva información y enviará a componentB.

Intenté dos formas de transferir los datos, una fue mediante un servicio

 export class DataService {
  data: any;

  constructor() {
    console.log(this.data); <----- the return is undefined
  }

Y nada regresa. Creo que el componente Nebular Dialog está matando el alcance.

Mi ComponenteB que recibirá los datos es:

 export class ComponentB implements OnInit {

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.preSaleItem = this.dataService.data;
    console.log(this.preSaleItem); <----- return is the same of the service
  }
 }

Reforzando la información sobre el problema: Tengo un componentA que pasa el producto al diálogo y construye el preSaleItem que mencioné antes, y funcionó bien.

Después de eso, cuando el preSaleItem se construyó en el diálogo, necesito enviarlo al componentB. Pero la forma que pensé, a través del servicio, no funciona. :(

Intenté no pasar por el diálogo, usando componentA para el servicio con una variable observable para componentB, y funcionó. Pero necesito que los datos pasen por el diálogo.

¿Cuáles son las posibles soluciones?

Respuesta #1

Encontré una manera de resolver mi problema a través de la ruta angular. Pondré un código sencillo para demostrarlo. Usando el atributo state.

export class DialogComponent implements OnInit {
  product: any; <--- the object that the dialogue will receive
  preSaleItem: any; <-- and transform, to move to componentB.

  constructor(private ref: NbDialogRef<DialogComponent>) {}

  navigateToOptionals() {
    this.fillPreSaleItem();
    this.router.navigate(['/pages/componentB', {
      state: {
        data: this.preSaleItem
      }
    });
    this.close();
  }

  close() {
    this.ref.close();
  }
}

¿Cómo estuvo en mi componenteB?

export class ComponentB implements OnInit {
  item: any;

  constructor() {}

  ngOnInit() {
    this.item = history.state.data;;
    console.log(this.item); <----- return my object that i want :)
  }
 }

¡Encontré este sitio que me ayudó mucho! https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255

Artículos relacionados