¿Cómo forzar la redirección a una ruta particular en angular?

Introducción:

Podemos usar el concepto de vinculación de propiedades y podemos pasar parámetros de consulta a routerLink. Usando el enlace de propiedades, podemos vincular la propiedad queryParams y proporcionar los detalles requeridos en el objeto.

Vinculación de propiedades: es un concepto en el que usamos la notación de corchetes para vincular datos a las propiedades del Modelo de objetos del documento (DOM) del elemento del lenguaje de marcado de hipertexto (HTML).

import {Component, OnInit} from '@angular/core'
   
@Component({
   
selector:'app-property',
template:
`<p [textContent]="title"></p> 
`
})
   
export class AppComponent implements OnInit{
   
constructor(){}
ngOnInit() {}
   
title='Property Binding example in GeeksforGeeks';
   
}

Producción:

Podemos implementar la redirección de ruta de dos maneras:
1) El primer método es hacerlo desde un archivo .html.
2) El segundo método es del archivo .ts.

Sintaxis para el archivo .html :
 

<a [routerLink]="[/path]" >
   State Details 
</a>

• Acercarse:

  • Primero, configure las rutas en app.module.ts
  • Implemente el enlace de la propiedad routerLink con la ruta requerida en el archivo HTML.
  • Después de mencionar las instrucciones anteriores, podemos hacer clic en el elemento HTML configurado y podemos redirigirlo.
  • Una vez que haya terminado de hacer clic en él, lo redirigirá automáticamente a otro componente.

  Implementación por código:
  app.module.ts:

  import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { RouterModule, Routes } from "@angular/router";    import { AppComponent } from "./app.component"; import { StateComponent } from "./state/state.component";    const routes: Routes =    [{ path: "punjab", component: StateComponent }];    @NgModule({     imports: [BrowserModule, RouterModule.forRoot(routes)],     declarations: [AppComponent, StateComponent],     bootstrap: [AppComponent], }) export class AppModule {}

  aplicación.componente.html:

  <a [routerLink]="['/punjab']">    State Details  </a> <router-outlet></router-outlet>

  Después de hacer clic en la etiqueta de anclaje, podemos ver que la URL se cambiará de la siguiente manera y se nos dirigirá al componente configurado en el archivo app.module.ts.

  

  Salida:
  estado.componente.html:
   

  

• Segundo método del archivo .ts:

  Acercarse:
  • Primero, configure las rutas en app.module.ts
  • Implemente el enrutamiento importando ‘Router’ desde ‘@angular/router’.
  • Luego inicialice el enrutador en el constructor.
  • Después de realizar el proceso anterior, implemente el enrutamiento en una función para que la función se pueda activar desde el archivo .html.
  • Una vez que todo esté hecho, podemos forzar la redirección de la ruta a otro componente.

  Implementación Por código:
  app.module.ts:

  import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes } from '@angular/router';     import { AppComponent } from './app.component'; import { StateComponent } from './state/state.component';     const routes: Routes = [   { path: 'punjab', component: StateComponent }, ];     @NgModule({   imports:      [ BrowserModule, RouterModule.forRoot(routes) ],   declarations: [ AppComponent, StateComponent ],   bootstrap:    [ AppComponent ] }) export class AppModule { }

  aplicación.componente.ts:

  import { Component, OnInit } from '@angular/core'; import {Router} from '@angular/router';       @Component({   selector: 'app-main',   templateUrl: './main.component.html',   styleUrls: ['./main.component.css'] }) export class HomeComponent implements OnInit {      constructor(private router:Router) { }      ngOnInit(){}  onSelect(){       this.router.navigate(['/punjab']);  } }

  aplicación.componente.html:

  <a (click)="onSelect()">    State Details  </a> <router-outlet></router-outlet>

  Después de seguir el código anterior y si hace clic en la etiqueta de anclaje, se cambiará la URL y se le redirigirá al componente configurado respectivo.

  

  Producción: