¿Cómo habilitar el enrutamiento y la navegación entre páginas de componentes en Angular 8?

La tarea es habilitar el enrutamiento entre los componentes angulares haciendo sus rutas cuando un usuario hace clic en el enlace, se navegará al enlace de la página correspondiente al componente requerido.

Háganos saber qué es el enrutamiento en Angular

Enrutamiento angular 8:

Acercarse:

• Cree una aplicación angular.

  sintaxis:

  ng new app_name

• Para el enrutamiento necesitará componentes, aquí hemos creado dos componentes (inicio y tablero) para mostrar la página de inicio y el tablero.

  sintaxis:

  ng g c component_name
  

• En app.module.ts, importe RouterModule desde @angular/router.

  sintaxis:

  import { RouterModule } from '@angular/router';
  

• Luego, en las importaciones de app.module.ts, defina las rutas.

  imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot([
        { path: 'home', component: HomeComponent },
        { path: 'dash', component:DashComponent } 
      ])
    ],
  

• Ahora, para la parte HTML, defina el HTML para app.component.html. En link, defina la ruta de routerLink como el nombre del componente.

  <a routerLink="/home">Home </a><br>
  <a routerLink="/dash">dashboard</a>

• Aplique router-outlet para su aplicación en app.component.html.

  <router-outlet></router-outlet>
  

• Ahora simplemente defina HTML para el archivo home.component.html y dash.component.html .
• Su aplicación web angular está lista.

Implementación de código:

• aplicación.módulo.ts:

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { DashComponent } from './dash/dash.component';    @NgModule({   declarations: [     AppComponent,     HomeComponent,     DashComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     RouterModule.forRoot([       { path: 'home', component: HomeComponent },       { path: 'dash', component:DashComponent }      ])   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

• aplicación.componente.html

  <a routerLink="/home">Home </a><br> <a routerLink="/dash">dashboard</a> <router-outlet></router-outlet>

• inicio.componente.html

  <h1>GeeksforGeeks</h1>

• tablero.componente.html

  <h1>Hey GEEKS! Welcome to Dashboard</h1>

Producción:

Ejecute el servidor de desarrollo y haga clic en los enlaces: