如何强制重定向到成角度的特定路线？

介绍：

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

属性绑定：这是一个概念，其中我们使用方括号表示法将数据绑定到超文本标记语言(HTML)元素的文档对象模型(DOM)属性。

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

输出：

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

.html文件的语法：

   State Details 

• 方法：

  • 首先，在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：

  
     State Details 
  
  
  

  单击锚标记后，我们可以看到该URL将以以下方式更改，并且将被定向到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：

  
     State Details 
  
  
  

  遵循上述代码和一个代码(如果您单击锚标记)后，URL将被更改，您将被重定向到相应的已配置组件。

  

  输出：