redireccionar - rutas angular 6

Ruta de recarga angular 2 en el cambio de parámetros

Question

Actualmente estoy escribiendo mi primera aplicación angular 2. Tengo un OverviewComponent que tiene la siguiente plantilla simple:

<div class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

al acceder al enrutador url / my me redirecciona a /overview que luego carga un mapa dentro de la salida del enrutador. La <app-list> tiene una lista de elementos en los que se puede hacer clic y que activa un <app-detail> en lugar del componente de la aplicación. Por lo tanto, paso la identificación del archivo json referente en la url así: /details/:id (en mis rutas).

Todo lo anterior funciona totalmente bien. Si ahora hago clic en uno de los elementos de la lista, se muestran los detalles, PERO cuando selecciono otro elemento de lista, la vista no cambia a los nuevos detalles. La URL cambia, pero el contenido no se vuelve a cargar. ¿Cómo puedo lograr una reinicialización de DetailComponent?

Answer 1

Esto actualmente no es directamente compatible. Ver también https://github.com/angular/angular/issues/9811

Lo que puedes hacer es algo como

<div *ngIf="doShow" class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

doShow:boolean: true;

constructor(private _activatedRoute: ActivatedRoute, private _router:Router, private cdRef:ChangeDetectorRef) {
  _router.routerState.queryParams.subscribe(
    data => {
      console.log(''queryParams'', data[''st'']); 
      this.doShow = false;
      this.cdRef.detectChanges();
      this.doShow = true;
  });
}

(no probado)

Answer 2

Es posible detectar cualquier cambio en los parámetros recibidos, en mi caso cargo la información usando una resolución, por lo que no necesito el parámetro (solo detectar si cambia). Esta es mi solución final:

public product: Product;
private parametersObservable: any;

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.parametersObservable = this.route.params.subscribe(params => {
    //"product" is obtained from ''ProductResolver''
    this.product = this.route.snapshot.data[''product''];
  });
}

//Don''t forget to unsubscribe from the Observable
ngOnDestroy() {
  if(this.parametersObservable != null) {
    this.parametersObservable.unsubscribe();
  }
}

Answer 3

Lo resolví mediante el uso de eventos, si el componente secundario envía un nuevo enlace y se emite un evento, el padre puede encontrar el cambio y llamar a alguna función de recarga, que volverá a cargar los datos necesarios. Otra opción es suscribirse a los parámetros de ruta, y encontrarlos cuando cambie. Pero creo que los chicos de angular2 deberían pensar en agregar parámetros a la función enrutar.navigate, que puede forzar la recarga. (forceReload = true)

Answer 4

No sé si hay una respuesta al problema similar a la que voy a proponer aquí, así que lo haré de todos modos:

Logré lograr una recarga ''falsa'' de la siguiente manera.

Lo que básicamente hice fue crear un Componente que me redirecciona al componente ''real'' que quiero usar:

@Component({
  selector: ''camps-fake'',
  template: ''''
})
export class FakeComponent implements OnInit {

  constructor(private _router:Router,
              private _route:ActivatedRoute)
  { }

  ngOnInit() {
    let id:number = -1;
    this._route.params.forEach((params:Params) => {
      id = +params[''id''];
    });

    let link:any[] = [''/details'', id];
    this._router.navigate(link);
  }

}

Entonces, al seleccionar un elemento de la lista, el enrutador navegará a /fake/:id que simplemente extrae la identificación de la URL y navega hacia el componente ''real''.

Sé que podría haber una manera más fácil o más elegante, pero creo que esta solución funciona bastante bien ya que la falsificación realmente no llama la atención. Solo el ''parpadeo'' cuando la página se recarga es un aspecto negativo, pero en lo que respecta a mis conocimientos de CSS puede haber alguna transición para cubrir eso.

Answer 5

Según la primera versión final, esto se resuelve.

Solo preste mucha atención para restablecer correctamente el estado del componente cuando el parámetro cambie

this.route.params.subscribe(params => {
    this.param = params[''yourParam''];
    this.initialiseState(); // reset and set based on new parameter this time
});

Answer 6

Otra alternativa que debe agregarse aquí es proporcionar RouteReuseStrategy a su módulo.

providers: [
  {
    provide: RouteReuseStrategy,
    useClass: AARouteReuseStrategy
  }
]

El comportamiento predeterminado del enrutador es reutilizar la ruta si la configuración es la misma (que es el caso cuando solo se cambia el parámetro: id en esta pregunta). Al cambiar la estrategia para no reutilizar la ruta, el componente se volverá a cargar, y no tiene que suscribirse a los cambios de ruta en el componente.

Una implementación de RouteReuseStrategy podría ser así:

export class AARouteReuseStrategy extends RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, handle: {}): void {

  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): {} {
     return null;
 }
 shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
   return false; // default is true if configuration of current and future route are the same
 }
}

También he escrito algo sobre esto:

https://pjsjava.blogspot.no/2018/01/angular-components-not-reloading-on.html