Estoy aprendiendo angular, en mi proyecto, mi barra de navegación que he creado routerLink proporciona para navegar a la página.

    <ul>
          <li> <a href="#">Home</a></li>
          <li> <a href="#" [routerLink]="['/about']" >about us</a></li>
          <li> <a href="#" [routerLink]="['/contact']" >contact us</a></li>
    </ul>

Y este es mi app.module.ts, en el que he configurado el enrutador para la navegación.

 imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
       { path:"**", component: HomeComponent,pathMatch: 'full' },
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
    ])
  ],

Por lo tanto, esto funciona perfectamente cuando lo ejecuto va primero a la página de inicio, pero cuando hago clic en la página sobre nosotros y la página de contacto en el enrutador de cadena de consulta cambiará, pero el contenido no cambia, el contenido de la página de inicio es el mismo que aquí, aquí es mi página de inicio y sobre nosotros. this is m home.component.ts

constructor(private _avRoute: ActivatedRoute,
              private _cmsService: CmsService,
              private _router: Router) { }

  ngOnInit() {
     this.getConsultHome();
  }

  getConsultHome(){
     this._cmsService.getcmsConsultHome()
        ._router.params.subscribe(data =>{ this.data = data }
        , error => this.errorMessage = error); 
  }

Y este es mi about.component.ts

  constructor(private _avRoute: ActivatedRoute,
              private _cmsService: CmsService,
              private _router: Router) {              
  }

  ngOnInit() {  
    this._cmsService.getcmsConsultAbout()
        .subscribe(data =>{ this.data = data }
        , error => this.errorMessage = error);
  } 

Por favor, alguien me ayuda, estoy atascado en el problema. Vi muchas preguntas relacionadas con esto, pero no tanto como para resolver mi consulta, gracias de antemano

1
Brijesh Mavani 16 ene. 2018 a las 10:00

3 respuestas

La mejor respuesta
{ path:"**", component: HomeComponent,pathMatch: 'full' },

Mueve esta línea para durar:

RouterModule.forRoot([
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
       { path:"**", component: HomeComponent,pathMatch: 'full' },
])

Lo que hace es, path:"**" esto considerará todas las rutas, sin importar lo que ingresas en la url, se está utilizando para la página 404.

path:"**" debe ser path:"" para la URL de la página de inicio, use path:"**" para tu página 404

Idealmente, sus rutas deberían verse así:

RouterModule.forRoot([
       { path:"", component: HomeComponent,pathMatch: 'full' },
       { path:"about", component: AboutComponent },
       { path:"contact" , component: ContactComponent }
       { path:"**", component: ErrorComponent },
])

Espero que esto aclare todas tus dudas.

0
Vivek Doshi 16 ene. 2018 a las 07:35

El problema radica en tus rutas definidas:

{ path:"**", component: HomeComponent, pathMatch: 'full' }

Definió un comodín como la ruta al HomeComponent, lo cual está bien si desea que cada ruta indefinida conduzca a su pantalla de inicio.

Pero debido a que lo colocó en la parte superior de sus rutas, siempre es la primera ruta que coincide, sin importar lo que ingresó, por lo tanto, cada ruta conduce al Componente de inicio.

Intenta cambiar el orden a:

RouterModule.forRoot([
    { path: 'about', component: AboutComponent },
    { path: 'temp', component: TempComponent },
    { path: '**', component: HomeComponent }
])

De esta forma, las rutas "about" y "temp" se emparejan antes del comodín.

1
Hendric Eckelt 16 ene. 2018 a las 07:22

Debe agregar el gancho de ciclo de vida ngOnDestory y cancelar la suscripción de sus suscripciones. También debe agregar la Suscripción de 'rxjs'

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

export class YourComponent implements OnInit, OnDestroy {

private subscription: Subscription[] = [];

ngOnInit() {
    this.subscription.push(this.customerService.getCustomers().subscribe(customers => {
      this.customers = customers;
    }));
  }

  ngOnDestroy() {
    this.subscription.forEach(sub => {
      sub.unsubscribe();
    });
  }

}

Espero que eso ayude.

Aquí está la documentación oficial: https://angular.io/guide/lifecycle-hooks

2
JiiB 16 ene. 2018 a las 07:04