Angular 4: pasar un objeto de un componente a otro (sin jerarquía principal – secundaria)

Traemos la mejor información que encontramos en internet. Queremos que te sea de utilidad y si puedes comentarnos alguna mejora hazlo con total libertad.

Solución:

Resolví el problema pasando la identificación del objeto del mosaico en el que se hizo clic como en los extras de navegación de la ruta y luego usé un servicio en el componente de detalles para obtener el objeto en función de la identificación pasada a través de la ruta.

Proporcionaré el código a continuación, así que espero que nadie tenga que pasar por todo esto nunca más.

El componente que muestra los mosaicos en los que se puede hacer clic para ver los detalles del objeto que contienen:

  editPropertyDetails(property: Property) 
    console.log('Edit property called');

    let navigationExtras: NavigationExtras = 
            queryParams: 
                "property_id": property.id
            
        ;

    this.router.navigate(['/properties/detail'], navigationExtras);
  

el componente de detalle que recibe el objeto en el que se hizo clic

  private sub: any;
  propertyToDisplay: Property;

  constructor
  (
    private sharedPropertyService: SharedPropertyService,
    private router: Router,
    private route: ActivatedRoute
  ) 

  ngOnInit() 
  this.sub = this.route.queryParams.subscribe(params => 
        let id = params["property_id"];

        if(id) 
          this.getPropertyToDisplay(id);
        

    );
  

  getPropertyToDisplay(id: number) 
    this.sharedPropertyService.getPropertyToDisplay(id).subscribe(
            property => 
              this.propertyToDisplay = property;
            ,
            error => console.log('Something went wrong'));
  

  // Prevent memory leaks
  ngOnDestroy() 
    this.sub.unsubscribe();
  

El servicio

  properties: Property[];

  constructor( private propertyService: PropertyService) 

  public getPropertyToDisplay(id: number): Observable 
    if (this.properties) 
      return this.findPropertyObservable(id);
     else 
            return Observable.create((observer: Observer) => 
                this.getProperties().subscribe((properties: Property[]) => 
                    this.properties = properties;
                    const prop = this.filterProperties(id);
                    observer.next(prop);
                    observer.complete();
                )
            ).catch(this.handleError);
    
  

  private findPropertyObservable(id: number): Observable 
    return this.createObservable(this.filterProperties(id));
  

  private filterProperties(id: number): Property 
        const props = this.properties.filter((prop) => prop.id == id);
        return (props.length) ? props[0] : null;
    

  private createObservable(data: any): Observable 
        return Observable.create((observer: Observer) => 
            observer.next(data);
            observer.complete();
        );
    

  private handleError(error: any)  'Server error');
  

  private getProperties(): Observable 
    if (!this.properties) 
    return this.propertyService.getProperties().map((res: Property[]) => 
      this.properties = res;
      console.log('The properties: ' + JSON.stringify(this.properties));
      return this.properties;
    )
      .catch(this.handleError);
     else 
      return this.createObservable(this.properties);
      
  

Intente con la siguiente muestra:

Paso 1: Crear servicio [DataService]

import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService 
  private userIdSource = new BehaviorSubject(0);
  currentUser = this.userIdSource.asObservable();

  private orderNumSource = new BehaviorSubject(0);
  currentOrder = this.orderNumSource.asObservable();

  constructor()  

  setUser(userid: number) 
    this.userIdSource.next(userid)
  

   setOrderNumber(userid: number) 
    this.orderNumSource.next(userid)
  

Paso 2: establezca el valor en el componente de inicio de sesión

import  Component  from '@angular/core';
import  DataService  from "../services/data.service";

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'] 
)
export class LoginComponent 
  constructor( private dataService:DataService)      
   onSubmit() 
        this.dataService.setUser(1); 
   

Paso 3: Obtener valor en otro componente

import  Component, OnInit  from '@angular/core';
import  DataService  from "../services/data.service";

@Component(
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
)
export class ShoppingCartComponent implements OnInit 
  userId: number = 0;
  constructor(private dataService: DataService)  
  ngOnInit() 
    this.getUser();
 
  getUser() 
    this.dataService.currentUser.subscribe(user => 
      this.userId = user
    , err => 
      console.log(err);
    );
  
 

Nota: Al actualizar la página, el valor se perderá.

Al usar el servicio primero, crea una función en el servicio. llame a esa función y use sujeto a otro componente. escribir este código

 this.handleReq.handlefilterdata.subscribe(() => 
                this.ngDoCheck(); 
            );

aquí, handleReq es servicio. handlefilterdata es sujeto de rxjs.

Si te apasiona este mundo, eres capaz de dejar un post acerca de qué te ha gustado de esta crónica.

---

---

Utiliza Nuestro Buscador