Angular传递字符串查询参数，Angular4如何生成指定带参URL？

嘿，我来帮你搞定这个问题！不管是Angular4还是后续版本，传递字符串类型的查询参数来生成你要的http://localhost:3000/reviews?business_id=KNpcPGqDORDdvtekXd348w这个URL其实都很简单，下面给你两种常用的实现方式：

方法一：通过组件类的Router服务导航 #

这是在组件逻辑里触发导航的常用方式，步骤如下：

1. 首先在组件文件顶部导入所需的依赖：

import { Router, NavigationExtras } from '@angular/router';

2. 在组件的构造函数中注入Router服务：

constructor(private router: Router) { }

3. 编写导航方法，构造查询参数并发起导航：

navigateToReviewsPage() {
  // 定义字符串类型的查询参数
  const queryParams = {
    business_id: 'KNpcPGqDORDdvtekXd348w'
  };

  // 配置导航额外参数，传入查询参数
  const navigationExtras: NavigationExtras = {
    queryParams: queryParams
  };

  // 导航到reviews路由，自动拼接查询参数
  this.router.navigate(['/reviews'], navigationExtras);
}

调用这个方法后，就会自动跳转到你想要的目标URL啦。

方法二：在模板中使用routerLink直接跳转 #

如果是在HTML模板里通过链接跳转，可以直接用[queryParams]绑定参数：

<!-- 点击这个链接就会跳转到带指定查询参数的页面 -->
<a [routerLink]="['/reviews']" [queryParams]="{ business_id: 'KNpcPGqDORDdvtekXd348w' }">
  前往评论页
</a>

小提示 #

注意：如果你的查询参数包含特殊字符，Angular会自动帮你进行URL编码，不需要手动处理，非常省心~

内容的提问来源于stack exchange，提问作者basma ebraheim