Saltar al contenido
Consejos

Navegando a las rutas desde el código en angular

No voy a escribir una condición por ahora, sino que haré un par de botones en app.component.html. Al hacer clic, navegará a diferentes componentes.

123456<div><buttontype="button"(click)="navigateToFirst()"``Primer</button
html


Como pueden ver, hemos añadido con éxito dos botones en app.component.html, y al hacer clic en los eventos los métodos van a llamar a navigateToFirst() y navigateToSecond(), respectivamente. Estos métodos llamarán al método navigate() de la clase Router para navegar a otra vista. 


Navegando a las rutas desde el código en angular
Navegando a las rutas desde el código en angular




Así que vamos a añadir estas funciones a nuestro archivo app.component.ts.



1234567891011121314151617181920importar{Componente}de$0027@angular/núcleo$0027;importar{Ruta}de$0027@angular/router$0027;@Componente({ selector:$0027app-root$0027, templateUrl:$0027./app.component.html$0027, styleUrls:[$0027./app. component.scss$0027]})exportclassAppComponent{constructor(privado _router:Router){}navigateToFirst(){this._router.navigate([$0027first$0027])}navigateToSecond(){this.router.navigateByUrl($0027/second$0027)}}
ts

Aquí hemos inyectado la clase de router en el constructor que nos permite navegar de una vista a otra. Tiene dos métodos, navegar y navegar por el url, que navegan por las rutas. Son similares; la única diferencia es que el método navigate toma una matriz que se une y funciona como la URL, y el método navigateByUrl toma un camino absoluto.

Por ejemplo, si tenemos que navegar a /estudiantes/1, podemos navegar a esta URL de dos maneras.
  1. 
esto._router.navigate($0027estudiantes$0027,1)
  2. 
this._router.navigateByUrl($0027/students/1$0027)

Al hacer clic en el botón, se puede añadir alguna condición para navegar el usuario en diferentes condiciones.

Ahora voy a aplicar algo del CSS para embellecer nuestra aplicación. Lo pondré en el archivo style.scss.
12345678910111213141516.btn{color: blanco;color de fondo: azul;borde: ninguno;relleno:.5em2em;borde-radio:2em;box-shadow:002px2px;tamaño de fuente:18px;margin-left:5px;margin-right:5px;contorno: ninguno;&:hover{color de fondo: gris;cursor: puntero;}}
scss

He usado el SCSS aquí. Si no estás familiarizado con él, puedes leer sobre él aquí. Puedes usar el CSS, también, si no te sientes cómodo con el SCSS.

Nuestra salida se verá así.

Ahora es el momento de traer el Primer Componente Infantil a la escena. Haremos un botón como app.component.html en first.component.html.
123<p>first works!</p>;buttontype="button"(click)="navigateToFirstChild()"``Primero</button
html


Después de hacer los cambios en el primer.componente.ts, se parecerá al recorte anterior en el que tenemos un botón que llamará a una función sobre el evento de clic, que luego navegará y mostrará la vista de niño.



Ahora vamos a hacer una función en first.component.ts para navegar a FirstChildComponent.



1234567891011121314151617181920import{Componente,OnInit}de$0027@angular/núcleo$0027;import{Ruta,RutaActivada}de$0027@angular/router$0027;@Componente({ selector:$0027app-first$0027, templateUrl:$0027./primer.componente.html$0027, styleUrls:[$0027./primer.componente. scss$0027]})exportclassFirstComponentimentsOnInit{constructor(privado _enrutador:enrutador,privado _enrutadoractivado:enrutadoractivado){}navegar aFirstChild(){este._enrutador.navegar(["first-child"],{relativo a:este._enrutadoractivado})}}
ts

Nota: En el método navigate(), he pasado un parámetro extra. Es un tipo de objeto conocido como NavigateExtras. Hemos usado el relativeTo de NavigateExtras, y en el valor, hemos dado la instancia de ActivatedRoute. Así que no es necesario proporcionar la URL completa en el array, y automáticamente extenderá el parámetro actual después de la URL existente.

Finalmente, nuestra salida se ve así.