如何在angular中强制重定向到一个特定的路由

介绍:

我们可以使用属性绑定的概念，我们可以将查询参数传递给 routerLink。使用属性绑定，我们可以绑定queryParams属性，可以在对象中提供所需的细节。

属性绑定：这是一个概念，我们使用方括号符号将数据与超文本标记语言（HTML）元素的文档对象模型（DOM）属性绑定。

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';
   
}

输出:

我们可以通过两种方式实现路由重定向。
1) 第一种方法是通过从.html文件进行。
2) 第二种方法是来自.ts文件。

.html文件的语法。

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

步骤:

• 首先，在app.module.ts中配置路由。
• 用HTML文件中的必要路径实现routerLink属性绑定。
• 提到上述说明后，然后我们可以点击配置好的HTML元素，可以重定向。
• 一旦你完成了点击它，它将自动将你重定向到另一个组件。

按代码实现：
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 {}

app.component.html:

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

点击锚标签后，我们可以看到，网址将以如下方式改变，我们将被引导到app.module.ts文件中配置的组件。

输出:
state.component.html:

• 第二种方法来自.ts文件。

步骤:
* 首先，在app.module.ts中配置路由。
* 通过从’@angular/router’导入’Router’实现路由。
* 然后在构造函数中初始化路由器。
* 在做完上述过程后，再在一个函数中实现路由，这样就可以从.html文件中触发该函数。
* 一旦一切完成，那么我们就可以强制重定向路由到另一个组件。

按代码实现：。
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 { }

app.component.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']);
     }
    }

app.component.html:

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

在遵循上述代码后，如果你点击锚标签，那么网址将被改变，你将被重定向到各自配置的组件。

输出: