Fresado en Angular 9/10

El enrutamiento en Angular permite a los usuarios crear una aplicación de una sola página con múltiples vistas y permite la navegación entre ellas. Los usuarios pueden cambiar entre estas vistas sin perder el estado y las propiedades de la aplicación.

Acercarse:

• Cree una aplicación Angular que se utilizará.
• Cree los enlaces de navegación dentro del componente de la aplicación y luego proporcione la directiva «routerLink» a cada ruta y pase el valor de la ruta a la directiva «routerLink» .
• Luego, agregue las rutas al archivo routing.module.ts y luego importe el archivo routing.module.ts al archivo app.module.ts.

Sintaxis:

• HTML:

<li><a routerLink="/about" >About Us</a></li>
<router-outlet></router-outlet>

• TS:

 { path: 'about', component: AboutComponent }

Ejemplo: vamos a crear una aplicación angular simple que use enrutamiento angular. Entonces, primero, creamos una aplicación Angular ejecutando el siguiente comando en CLI.

ng new learn-routing

Luego estamos creando una navegación simple que nos permite navegar entre los diferentes componentes, y también hemos creado algunos componentes, para que los usuarios puedan cambiar entre estos componentes mediante el enrutamiento.

<span>
    <ul>
        <li><a routerLink="/" >Home</a></li>
        <li><a routerLink="/products" >Products</a></li>
        <li><a routerLink="/about" >About Us</a></li>
        <li><a routerLink="/contact" >Contact Us</a></li>
    </ul>
</span>
<router-outlet></router-outlet>

Aquí, la salida del enrutador es una funcionalidad de enrutamiento que utiliza el enrutador para marcar dónde se debe insertar una plantilla, un componente coincidente.

Luego, dentro del archivo app-routing.module.ts , proporcionamos estas rutas y le informamos al angular sobre estas rutas.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
  
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent, },
];
  
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

Y luego simplemente importe el módulo «AppRouting» dentro del archivo app/module.ts dentro de las importaciones de @NgModule .

import { NgModule } from '@angular/core';
import { HomeComponent } from './home.component'
import { ProductComponent } from './product.component'
import { AboutComponent } from './about.component'
import { ContactComponent } from './contact.component'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Así que ahora ejecute esto usando «ng serve» en CLI y abra localhost://4200 en el navegador aquí verá su barra de navegación, y puede navegar de un componente a otro sin recargar la página.

Producción: