Angular 4 - 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. Ruta es el nombre del enrutador y 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 ancla y le 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.

Cuando un usuario hace clic en Nuevo componente, verá lo siguiente en el navegador.

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.