Angular7 - 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.

Durante la configuración del proyecto, ya hemos incluido el módulo de enrutamiento y el mismo está disponible en app.module.ts como se muestra a continuación:

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule se agrega como se muestra arriba y se incluye en la matriz de importaciones.

Detalles de archivo de app-routing.module se dan a continuación:

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Aquí, debemos tener en cuenta que este archivo se genera de forma predeterminada cuando se agrega el enrutamiento durante la configuración del proyecto. Si no se agregan, los archivos anteriores deben agregarse manualmente.

Entonces, en el archivo anterior, hemos importado Routes y RouterModule desde @ angular / enrutador.

Hay una constante routesdefinido cuál es de tipo Rutas. Es una matriz que contiene todas las rutas que necesitamos en nuestro proyecto.

Las rutas const se le dan al RouterModule como se muestra en @NgModule. Para mostrar los detalles de enrutamiento al usuario, necesitamos agregar la directiva <router-outlet> donde queremos que se muestre la vista.

Lo mismo se agrega en app.component.html como se muestra a continuación

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

Ahora creemos 2 componentes llamados como Home y Contact Us y navegar entre ellos usando enrutamiento.

Inicio del componente

Primero, discutiremos sobre Home. A continuación se muestra la sintaxis de Component Home:

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Componente Contáctenos

A continuación se muestra la sintaxis de Component Contact Us:

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Terminamos con la creación de componentes en casa y contáctanos. A continuación se muestran los detalles de los componentes en app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Ahora agreguemos los detalles de las rutas en app-routing.module.ts como se muestra a continuación -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

La matriz de rutas tiene los detalles del componente con la ruta y el componente. El componente requerido se importa como se muestra arriba.

Aquí, debemos notar que los componentes que necesitamos para el enrutamiento se importan en app.module.ts y también en app-routing.module.ts. Importémoslos en un solo lugar, es decir, en app-routing.module.ts.

Por lo tanto, crearemos una matriz de componentes que se utilizará para el enrutamiento y exportaremos la matriz en app-routing.module.ts y nuevamente la importaremos en app.module.ts. Así que tenemos todos los componentes que se utilizarán para el enrutamiento en app-routing.module.ts.

Así lo hemos hecho app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

La matriz de componentes, es decir, RoutingComponent se importa en app.module.ts de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
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, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Así que ahora hemos terminado con la definición de las rutas. Necesitamos mostrar lo mismo al usuario, así que agreguemos dos botones, Inicio y Contáctenos en app.component.html y al hacer clic en los botones respectivos, mostrará la vista del componente dentro de la directiva <router-outlet> que nosotros han agregado en add.component.html.

Crear botón dentro de app.component.html y dar la ruta a las rutas creadas.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

En .html, hemos agregado enlaces de anclaje, Inicio y Contáctenos y usamos routerLink para dar la ruta a las rutas que hemos creado en app-routing.module.ts.

Probemos ahora lo mismo en el navegador:

Así es como lo conseguimos en el navegador. Agreguemos un poco de estilo para que los enlaces se vean bien.

Hemos agregado los siguientes css en app.component.css:

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

Esta es la visualización de los enlaces en el navegador:

Haga clic en el enlace Inicio para ver los detalles del componente de la casa como se muestra a continuación:

Haga clic en Contáctenos, para ver los detalles de sus componentes como se indica a continuación:

Al hacer clic en el enlace, también verá que cambia la URL de la página en la barra de direcciones. Agrega los detalles de la ruta al final de la página como se ve en la captura de pantalla que se muestra arriba.

↰ Previous page Next page ↱