Angular 2 http.get（）url以動態值作為參數？

Question

如何將url參數（查詢字符串）傳遞給HTTP請求

let params: URLSearchParams = new URLSearchParams();

params.set('pageId', 0);
params.set('activeFilter', 1);

let requestOptions = new RequestOptions();
requestOptions.search = params;

return this._http.get("http://testsite.com/cats/page/", requestOptions ).map(res => res.json());

在我的requestOptions參考中我想傳遞的位置如：pageId /：activeFilter。

最后我需要建立一個URL來使用此URL調用我的Rest api服務器（ http://testsite.com/cats/page/:pageId/:activeFilter）// pageId = 0，activeFilter = 1

我必須只綁定值而不是整個字符串？

我嘗試了很多。 但這並沒有達到我的預期，這就是我在服務器控制台中獲得的/ cats / page /？pageId = 0＆activeFilter = 1的信息。

有什么建議嗎？ 無法找到我要去哪里

Answer 1

ECMA6提供了一個非常有趣的功能“字符串插值”，其中字符串可以具有占位符，我們已根據需要替換了占位符。

例如：

let first = 'Jane';
let last = 'Doe';
console.log(`Hello ${first} ${last}!`);

在您的情況下，它將是：

let param1 = 'someval1';
let param2 = 'someval2'
this._http.get(`http://testsite.com/cats/page/${param1}/${param2}`, requestOptions ).map(res => res.json());

Answer 2

如果要將這些值傳遞到url中，則應將它們直接放入url字符串中，如下所示：

@Injectable()
export class ExampleService {

  constructor(
    private http: Http
  ) { }

  getPage(pageId: number, activeFilter: number) {
    return this.http.get(`http://testsite.com/cats/page/${pageId}/${activeFilter}`)
                    .map(res => res.json())
  }

}

請注意，您使用``來允許字符串插值。

您可以通過傳入pageId和activeFilter從組件動態調用此服務方法，如下所示：

從'@ angular / core'導入{Component，OnInit}; 從'./example.service'導入{ExampleService};

@Component({
  selector: 'example',
})

export class ExampleComponent implements OnInit {
  constructor(
    private exampleService: ExampleService
  ) { }
  currentPageId = 0;
  activeFilter = 1;

  ngOnInit() { }

  getPage() {
    this.exampleService.getPage(this.currentPageId, this.activeFilter)
  }
}

希望能澄清一些事情。 祝好運！