使用帶有查詢參數的 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');
          }
        });
  }