6

estoy trabajando con Angular 7 y al cambiar el parámetro de la URL no me actualizar el contenido por que no vuelve a cargar el constructor o el ngOnInit, todas las URL llaman al mismo componentes por ejemplo CategoryComponent pero dependiendo del parámetro de la URL enseña unos productos u otros.

Lo explico mejor con codigo.

Componente Routering.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: ':category', component: CategoryComponent },
  { path: '**', component: Error404Component }
];

Tengo un menu con un dropdown-menu

<div class="dropdown-menu" aria-labelledby="dropdownMenuCategory">
  <a class="dropdown-item" [routerLink]="['/robots-aspiradores']">Robots Aspiradores</a>
  <a class="dropdown-item" [routerLink]="['/patinetes-electricos']">Patinetes Eléctricos</a>
  <a class="dropdown-item" [routerLink]="['/cafeteras']">Cafeteras</a>
</div>

Constructor del CategoryComponent

constructor( private _activatedRoute: ActivatedRoute, private _productService: ProductService ) {
    this.url = GLOBAL.url;
    this.categoryName = this._activatedRoute.snapshot.paramMap.get("category")
    this.getProductsCategory(this.categoryName);
    this.title = this.categoryName.replace('-', ' ').toUpperCase();
  }

Quiero que cuando se haga click a cada opción del menu me vuelva a cargar el constructor o ngOnInit pero solo carga la primera vez que entro pero si desde una pagina de categoría me muevo a otra ya no vuelve a cargar tengo que ir al HOME y entrar a otra categoría para que vuelva a cargar.

No se si me he explicado bien, espero que si, un saludo y gracias.

3
  • Hola Agustin, ¿has comprobado qué cada uno de los componentes que has creado tienen sus respectivas funciones (en este caso el CategoryComponent su clase, constructor y su funcion ngOnInit)?
    – jecorrales
    Commented el 27 dic. 2018 a las 13:29
  • Necesitaría ver el código de CategoryComponent, pero tiene pinta de que no te has suscrito al router correctamente: si cambias la ruta pero el componente a cargar es el mismo, el ciclo de vida no se ejecuta, como mucho se ejecutará ngOnChanges. Commented el 27 dic. 2018 a las 13:51
  • No me he suscrito al router como hago eso ? Acabo de editar el post y he puesto el constructor del CategoryComponent Commented el 27 dic. 2018 a las 14:02

1 respuesta 1

8

Lo primero de todo es entender el ciclo de vida de los componentes de Angular, así que aquí te dejo un artículo que lo explica en detalle.

Yo me centraré aquí en lo importante: Angular no destruye un componente para crear uno del mismo tipo en el mismo sitio, simplemente cuando la URL cambia se ejecuta el ciclo de detección de cambios.

Por tanto tenemos un compomente que se carga con la URL "/:category", donde ese :category es un parámetro variable. Puesto que el constructor del componente sólo se ejecuta cuando se crea una instancia y tu constructor tiene esta forma:

constructor( private _activatedRoute: ActivatedRoute, private _productService: ProductService ) {
    ...
    this.categoryName = this._activatedRoute.snapshot.paramMap.get("category")
    this.getProductsCategory(this.categoryName);
    ...
}

Resulta que sólo miras la ruta una vez (obtienes la ruta actual, un snapshot, y actúas en consecuencia (cargando la categoría correspondiente).

Pero cuando el parámetro varía tu componente no se entera porque no está observando (no está suscrito a) los cambios en el parámetro. Lo miró una vez y se ha olvidado de él

Por tanto te aconsejo hacer los siguientes cambios:

export class CategoryComponent implements OnInit {

  //atributos
  category: string;
  title: string;
  url = GLOBAL.url;

  constructor( 
      private _activatedRoute: ActivatedRoute,
      private _productService: ProductService ) {
    //nada de código con lógica de angular aquí, es lo recomendado
  }

  ngOnInit() {
    this._activatedRoute.paramMap.subscribe((params: ParamMap) => {
      this.category = params.get('category');
      this.getProductsCategory(this.categoryName);
      this.title = this.categoryName.replace('-', ' ').toUpperCase();
    }
  }

  ... //resto de código
}

De este modo cualquier cambio en la URL será detectado por el componente y actuará como la primera vez.

3
  • 1
    Muchas gracias, lo que conseguido con lo que me has explicado. Commented el 27 dic. 2018 a las 14:41
  • Hola @Pablo , colocando ese codigo en el OnInit siempre va a estar escuchando cuando se modifican los parametros de la URL ? porque segun lo que he leido, lo que esta dentro del OnInit se ejecuta cuando se carga la vista por primera vez solamente. Pregunto: en lugar de usar OnInit no se deberia usar OnChanges para que cuando ocurra cualquier cambio se ejecute ese codigo? corrijeme si estoy equivocado por favor, estoy trabajando en algo y ando un poco confundido. Gracias de antemano!
    – JulianProg
    Commented el 14 ago. 2019 a las 14:16
  • Como comentas, onInit sólo se ejecuta una vez, pero es que sólo tienes que suscribirte una vez. La suscripción no se borra hasta que uses unsuscribe Commented el 14 ago. 2019 a las 16:42

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.