Saltar al contenido

Angular método enrutador navegar exampleJul, 7thIn esta guía, vamos a aprender acerca de cómo navegar …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo navegar mediante programación en el router angular mediante el uso de un método naviagte .

En aplicaciones angulares se utilizan normalmente Directiva routerLink navegar a diferentes páginas de nuestro sitio, pero en algunos casos, tenemos que empujar al usuario diferentes rutas basadas en los eventos como cuando un usuario hace clic en un botón de inicio de sesión o el envío del formulario.

Si eres nuevo en el angular entonces echa un vistazo a mi anterior tutorialAngular enrutador principiantes guiar

método navegar método

El navegar ha sido importada desde el paquete de router / @ angular que nos ayuda a navegar un usuario mediante programación.

Veamos un ejemplo.

En este ejemplo, estamos navegando un usuario a la página principal cada vez que envía un formulario.



import { Component} from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class ContactComponent {
user = {
name: '',
email: ''
};
// injecting route object into this contact component
constructor(private route: Router) { }
onSubmit() {
console.log(this.user.name, this.user.email);
// inside array we need to pass the path we need to naviagte
this.route.navigate(['/']); }
}

En el código anterior, en primer lugar, nos importó Router del paquete / enrutador @ angular y la inyectó intothe constructor ContactComponent .

Dentro del método OnSubmit estamos accediendo el método de navegar desde el this.route objeto e invocando el método por el que pasa una matriz con el camino [ ‘.