1

//en un componente de mi aplicacion de angular estoy usando un Bootom sheet, la clase de ese componente y la clase del componente original están dentro del mismo component.ts, lo que quiero es que al abrir el Booton sheet quiero ingresar datos del componente original pero no se como pasar esos datos, dejo mi componente

@Component({
   selector: 'app-publicaciones',
   templateUrl: './publicaciones.component.html',
   styleUrls: ['./publicaciones.component.css']
})
 export class PublicacionesComponent implements OnInit {

   constructor(
     private httpPublic: PublicacionesService,
     private auth: PrivateService,
     private _bottomSheet: MatBottomSheet,
   ) { }

   public URL: string = 'http://localhost:3000'
   public id: string;

   ngOnInit(): void {
     console.log(this.nombre)
     this.httpPublic.verPublic()
       .subscribe((res: any) => {
         this.publicaciones = res
         console.log(this.publicaciones)
       })
     this.auth.datosUser()
       .subscribe((res: any)=>{
         this.id = res._id
       })
   }

   publicaciones: any[]

   openBottomSheet(index): void {
     this._bottomSheet.open(BottomSheetOverviewExample)
   }

 }


 @Component({
   selector: 'aviso',
   templateUrl: 'actividad-publicacion.html'
 })
 export class BottomSheetOverviewExample {
   constructor(
     private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExample>
     ) {}


   openLink(event: MouseEvent): void {
     this._bottomSheetRef.dismiss()
     event.preventDefault()
   }

 }

//Me pueden indicar una solucion para que cuando se ejecute el metodo openBottomSheet(index) pueda pasar datos de ese componente al que esta abajo

0

1 respuesta 1

1

Prueba con esto:

  1. En el componente padre, envia la data a travez de la propiedad data
@Component({
   selector: 'app-publicaciones',
   templateUrl: './publicaciones.component.html',
   styleUrls: ['./publicaciones.component.css']
})
 export class PublicacionesComponent implements OnInit {

   constructor(
     private httpPublic: PublicacionesService,
     private auth: PrivateService,
     private _bottomSheet: MatBottomSheet,
   ) { }

   public URL: string = 'http://localhost:3000'
   public id: string;

   ngOnInit(): void {
     console.log(this.nombre)
     this.httpPublic.verPublic()
       .subscribe((res: any) => {
         this.publicaciones = res
         console.log(this.publicaciones)
       })
     this.auth.datosUser()
       .subscribe((res: any)=>{
         this.id = res._id
       })
   }

   publicaciones: any[]

   openBottomSheet(index): void {
     this._bottomSheet.open(
        BottomSheetOverviewExample,
        // Enviando data al Bottom-Sheet.
        { data: { nombres: ['Frodo', 'Bilbo'] } }
     );
   }

 }
  1. En el componente Bottom-Sheet:
import {Component, Inject} from '@angular/core';
import {MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';

 @Component({
   selector: 'aviso',
   templateUrl: 'actividad-publicacion.html'
 })
 export class BottomSheetOverviewExample {
   constructor(
     // Recibiendo data desde componente padre...
     @Inject(MAT_BOTTOM_SHEET_DATA) public data: any
     private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExample>
     ) {}


   openLink(event: MouseEvent): void {
     this._bottomSheetRef.dismiss()
     event.preventDefault()
   }

 }

Mas información y detalles los puedes encontrar en la documentación: https://material.angular.io/components/bottom-sheet/overview

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.