Angular 6 - Enrutamiento
El enrutamiento básicamente significa navegar entre páginas. Ha visto muchos sitios con enlaces que lo dirigen a una nueva página. Esto se puede lograr mediante el enrutamiento. Aquí las páginas a las que nos referimos estarán en forma de componentes. Ya hemos visto cómo crear un componente. Creemos ahora un componente y veamos cómo usar el enrutamiento con él.
En el componente principal principal app.module.ts, ahora tenemos que incluir el módulo del enrutador como se muestra a continuación:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
importar {RouterModule} desde '@ angular / enrutador'
Aquí, el RouterModule se importa de angular / enrutador. El módulo se incluye en las importaciones como se muestra a continuación:
RouterModule.forRoot([
{
path: 'new-cmp',
component: NewCmpComponent
}
])
RouterModule se refiere al forRootque toma una entrada como una matriz, que a su vez tiene el objeto de la ruta y el componente. Path es el nombre del enrutador y el componente es el nombre de la clase, es decir, el componente creado.
Veamos ahora el archivo creado por el componente -
New-cmp.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-new-cmp',
templateUrl: './new-cmp.component.html',
styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
newcomponent = "Entered in new component created";
constructor() {}
ngOnInit() { }
}
La clase resaltada se menciona en las importaciones del módulo principal.
New-cmp.component.html
<p>
{{newcomponent}}
</p>
<p>
new-cmp works!
</p>
Ahora, necesitamos que el contenido anterior del archivo html se muestre siempre que sea necesario o se haga clic en el módulo principal. Para esto, necesitamos agregar los detalles del enrutador en elapp.component.html.
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>
En el código anterior, hemos creado la etiqueta de enlace de anclaje y hemos dado routerLink como "new-cmp". Esto se refiere enapp.module.ts como el camino.
Cuando un usuario hace clic new component, la página debe mostrar el contenido. Para esto, necesitamos la siguiente etiqueta:<router-outlet> </router-outlet>.
La etiqueta anterior garantiza que el contenido de la new-cmp.component.html se mostrará en la página cuando un usuario haga clic new component.
Veamos ahora cómo se muestra la salida en el navegador.
![](https://post.nghiatu.com/assets/tutorial/angular6/images/custom_pipe1.jpg)
Cuando un usuario hace clic en Nuevo componente, verá lo siguiente en el navegador.
![](https://post.nghiatu.com/assets/tutorial/angular6/images/custom_pipe2.jpg)
La URL contiene http://localhost:4200/new-cmp. Aquí, el new-cmp se agrega a la URL original, que es la ruta dada en elapp.module.ts y el enlace del enrutador en el app.component.html.
Cuando un usuario hace clic en Nuevo componente, la página no se actualiza y el contenido se muestra al usuario sin recargar. Solo se volverá a cargar una parte particular del código del sitio al hacer clic. Esta función ayuda cuando tenemos mucho contenido en la página y es necesario cargarla en función de la interacción del usuario. La función también brinda una buena experiencia de usuario ya que la página no se recarga.