Angular的QueryParams

Angular中使用QueryParams来获取和设置URL中的查询参数。它是从URL中获取数据的一个很好的方法，也可以在URL中添加参数。在Angular中，我们可以通过QueryParams借口来获取和设置查询参数。

获取query参数

我们可以使用ActivatedRoute服务来访问当前路由的query参数。ActivatedRoute是一个路由器服务，用于在路由期间访问路由参数、查询参数和数据解析器。以下是如何获取query参数的示例代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
    });
  }

}

在上面的代码中，我们通过ActivatedRoute服务订阅了queryparams并在控制台日志输出了参数列表。

设置query参数

我们可以使用Router服务来设置路由的查询参数。Router是Angular路由器服务。以下是如何设置查询参数的示例代码：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor(private router: Router) { }

  navigateToSearch(query: string) {
    this.router.navigate(['/search'], { queryParams: { q: query } });
  }

}

在上面的代码中，我们使用了Router服务的navigate方法来设置查询参数。在这个例子中，我们通过q参数的值来设置查询参数。

总结

在Angular中，QueryParams可以用于获取和设置URL中的查询参数。我们可以使用ActivatedRoute服务来访问当前路由的query参数，使用Router服务来设置查询参数。

返回的markdown格式：

# Angular的QueryParams

Angular中使用QueryParams来获取和设置URL中的查询参数。它是从URL中获取数据的一个很好的方法，也可以在URL中添加参数。在Angular中，我们可以通过QueryParams借口来获取和设置查询参数。

## 获取query参数

我们可以使用ActivatedRoute服务来访问当前路由的query参数。ActivatedRoute是一个路由器服务，用于在路由期间访问路由参数、查询参数和数据解析器。以下是如何获取query参数的示例代码：

```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
    });
  }

}

在上面的代码中，我们通过ActivatedRoute服务订阅了queryparams并在控制台日志输出了参数列表。

设置query参数

我们可以使用Router服务来设置路由的查询参数。Router是Angular路由器服务。以下是如何设置查询参数的示例代码：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor(private router: Router) { }

  navigateToSearch(query: string) {
    this.router.navigate(['/search'], { queryParams: { q: query } });
  }

}

在上面的代码中，我们使用了Router服务的navigate方法来设置查询参数。在这个例子中，我们通过q参数的值来设置查询参数。

总结

在Angular中，QueryParams可以用于获取和设置URL中的查询参数。我们可以使用ActivatedRoute服务来访问当前路由的query参数，使用Router服务来设置查询参数。