pathmatch - router.navigate angular 5

Angular2 router.navigate actualiza la página

Question

Así es como se ven las rutas y el componente:

routes.config

export const routes: RouterConfig = [
   { path: ''users'', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: ''users/new'', component: NewUserComponent },    
];

new-user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate([''/users''])

¿Se supone que Angular2 actualice la página en router.navigate?

¿Qué más usar en lugar de router.navigate para evitar cualquier actualización de página?

Aquí está la prueba:

Answer 1

Esto cubre una situación híbrida AngularJS / Angular. Estoy agregando la respuesta porque esta pregunta es uno de los mejores resultados cuando google problemas de recarga de la página del enrutador angular. Con suerte, le ahorrará tiempo a alguien más.

En mi caso, tenía una configuración de ruta Angular 2 (en realidad 5) muy simple que funcionaba principalmente, excepto en un caso en el que un enlace de una ruta a otra causaría inexplicablemente una recarga de página. Había verificado todos los sospechosos habituales, formulario, botón de envío, etc.

Resultó que en algún lugar de un componente AngularJS que se mostraba en el momento en que se hizo clic en el enlace, había un ng-include . La documentación advierte sobre esto por una razón, supongo. Se reorganizó la plantilla para que ng-include pudiera cambiar a templateUrl y todo estaba bien.

Answer 2

Para mí funciona bien (del código del componente):

window.location.href = "/sth";

recarga automáticamente la página a la parte de URL dada.

Answer 3

Probablemente esté llamando a la función router.navigate dentro de un evento de clic.

<button class="btn btn-default"
    (click)="save()">Save</button>

Y la función de guardar es algo así como

save() {
    //Do stuff
    this._router.navigate([''/users'', { id: userId } ]);
}

Esto funciona en los navegadores IE11 y Edge, pero volvería a cargar la aplicación en Chrome.

Esto se debe a que falta un type en el elemento del botón, si el botón está dentro de un <form></form> Chrome usará ''submit'' como su valor predeterminado. Causar un envío de formulario cuando se hace clic en el botón.

Se prefiere establecer siempre un type cuando se usa el elemento de button Consulte aquí:

Entonces, cambiar el HTML a

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

Lo hará funcionar en los 3 navegadores.

Mi solución anterior también funciona (al devolver falso evitaría la acción predeterminada, es decir, enviar el formulario), pero creo que se prefiere la anterior.

Respuesta obsoleta pero guardada para la posteridad:

<button class="btn btn-default"
        (click)="save(); false">Save</button>

Answer 4

Sé que es un método simple, pero también puede configurar este código para actualizar la ruta en caso de éxito una vez que finalice toda la operación.

window.open (''usuarios'', ''_self'');

Se volverá a cargar y redirigirá a la página del usuario.

Answer 5

Tuve el mismo efecto (actualización de la página al navegar a la página de detalles) usando un simple enlace <a href="/details/1"></a> . La solución fue utilizar el enlace angular: <a [routerLink]="[''/details'', 1]"></a>