page - navigationend angular 4

Pasando datos a través del enrutador Angular2

Question

Tengo un componente donde selecciono un conjunto de objetos de imagen. Quiero pasar estas imágenes seleccionadas a mi nueva ruta, CreateAlbum. Los datos que anidó y no serían adecuados para pasar como parámetros de URL.

¿Hay alguna manera fácil de lograr esto?

Aquí está mi código para navegar a la ruta

  public gotoCreateAlbum(): void {
    this.router.navigate([(''/create-album'')])
  }

Mis datos seleccionados se sientan en esta variable

@Input() selectedPhotos: IPhoto[];

y este es mi módulo de enrutamiento

const routes: Routes = [
  { path: ''photos'',  component: PhotosComponent},
  { path: ''photos/:filter'', component: PhotosComponent},
  { path: ''create-album'', component: CreateAlbumComponent}
];

Básicamente, quiero realizar las mismas operaciones como si el componente CreateAlbum fuera un componente secundario de mi componente actual, en cuyo caso habría usado @Input ()

Answer 1

A menos que desee que los usuarios manipulen la cadena de consulta en la barra de direcciones, haga un "atob" y "btoa" antes de enviar y después de recibir los datos. Solo un poco de seguridad

Además, si no desea tener una suscripción, puede usar el parámetro Route snapshot de la siguiente manera (solo que no se sigue actualizando como un observable, por lo que, a menos que el componente se reinicie, no será obtener valor actualizado si lo hay. Por lo tanto, un buen lugar para obtener el valor es en el controlador de eventos ngOnInit

// before
this._router.navigate(["/welcome/" + atob(userName)]);

// after
ngOnInit() {
    this.userName = btoa(this.route.snapshot.params[''userName'']);
}

Answer 2

Consulte https://angular.io/guide/router para ver un ejemplo en profundidad. Desplácese hasta este fragmento de código:

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk ''foo'' property for fun.
  this.router.navigate([''/heroes'', { id: heroId, foo: ''foo'' }]);
}

Para obtener el valor de ''id'' en el componente de destino:

ngOnInit() {
  this.heroes$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => {
      // (+) before `params.get()` turns the string into a number
      this.selectedId = +params.get(''id'');
      return this.service.getHeroes();
    })
  );
}

Answer 3

Espero que esto funcione. Trate de usar los parámetros de consulta.

 <nav>
      <a [routerLink]="[''/component1'']">No param</a>
      <a [routerLink]="[''/component2'']" [queryParams]="{ page: 99 }">Go to Page 99</a>
 </nav>

o

opencomponent2(pageNum) {
    this.router.navigate([''/component2''], { queryParams: { page: pageNum } });
  }

En componente infantil:

constructor(
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params[''page''] || 0;
      });
  }

He estudiado esto en el sitio web rangle.io. Intenta esto si te funciona. de lo contrario, angular.io/docs/ts/latest/cookbook/… es solo una opción.

Answer 4

Puede pasar datos utilizando enrutador, por ejemplo

{ path: ''form'', component: FormComponent ,data :{data :''Test Data''} },

y tu componente

import { ActivatedRoute, Router } from ''@angular/router'';

export class FormComponent {
    sub: any;
    constructor(private route: ActivatedRoute) { }
    ngOnInit() {
        this.sub = this.route
            .data
            .subscribe(value => console.log(value));
    }
}

Más información

Pero puede que esta no sea la forma preferida, you can use parent child communication or make a service common and share data between them . Verifique abajo las referencias para hacer eso.

Comunicación entre padres e hijos

Compartir datos utilizando el servicio.

Answer 5

this.router.navigate([''path'', { flag: "1"}]);