使用带有查询参数的 angular 路由器

Question

目前在 angular v8 上并使用 queryParams 进行一些网络调用。

问题在于 angular queryParams 如何将其传递给路由的格式。

例如....

当前 URL：

/收件箱；姓名=123；标签=第一

URL 我想要：

/inbox?name=123&tab=first

我目前拥有的代码：

  onClick(report) {
    if(report) {
      this.router.navigate(['/inbox', { name: this.id, tab: this.tab }]);
    }
  }

Answer 1

使用它，它真的很容易阅读并为您提供很多有用的信息..

https://alligator.io/angular/query-parameters/

这是第一个例子：

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}

Answer 2

在我的导航服务中，我有这个。 这是一个可重复使用的 function 来浏览应用程序。

navigateTo(page: string, data?: any): Promise<void> {
      return this.router.navigate([page], {queryParams: data, skipLocationChange: true})
        .then(success => {
          if (!success) {
            console.error('navigation failed');
          }
        });
  }