如何通过routerLink传递查询参数？

任务是通过routerLink传递查询参数，为此，我们可以使用属性绑定概念来达到目标。使用属性绑定，我们可以绑定queryParams属性，并可以在对象中提供所需的详细信息。

什么是属性绑定?

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

句法：

   State Details 

 

属性绑定的示例：

Javascript

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

输出：

以上代码的插图

方法：

• 首先，在app.module.ts中配置路由
• 在HTML文件中使用必需的值实现查询参数。
• 然后在.ts文件中，在ngOnit中，尝试通过从“ angular @ router”导入已激活的Route来访问查询参数
• 一旦能够访问它们，请尝试使用HTML文件中的字符串插值语法或属性绑定语法来呈现它们。

下面是上述步骤的实现：

app.module.ts：

Java脚本

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

app.component.html：

的HTML

    State Details

单击锚标记后，URL将以以下方式显示：

我们还可以使用激活的路径访问查询参数。

这样，我们可以通过routerLink传递查询参数。

获取查询参数：

state.component.ts：

Java脚本

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
  
@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  
  capital: string;
  language:string;
  
  constructor(private route: ActivatedRoute) { }
  
  ngOnInit() {
    this.route.queryParams.subscribe(
      params => {
        this.capital =  params['capital'];
        this.language=params['language'];
      }
    )
  }
  
}

state.component.html：

的HTML

State Details are : 
  
Capital  : {{capital}} 
  
Language : {{language}} 

输出：

• 单击按钮之前：

  

• 单击按钮后：因此可以看到传递的查询参数