web-dev-qa-db-ja.com

Angular 5+？

Angular 5 SPAのオブジェクトからURLを作成しようとしています。私のコードは次のようになります。

import { UrlTree, UrlSegmentGroup, DefaultUrlSerializer, UrlSegment } from "@angular/router";

const urlTree = new UrlTree();
urlTree.root = new UrlSegmentGroup([new UrlSegment("EndPoint", {})], {});
urlTree.queryParams = {
  "param1": param1Value,
  "param2": param2Value
};
const urlSerializer = new DefaultUrlSerializer();
const url = urlSerializer.serialize(urlTree);

それは仕事をしますが、そのような些細な仕事にはかなりのオーバーヘッドが含まれているようで、オブジェクトからURLを取得するより簡単な方法があるのだろうかと思います。

私の期待は、次のような単純なものにすることです。

const url = someSerializer.serialize("/segment1/segment2", { 
  "param1": param1Value,
  "param2": param2Value
})

質問： Angular 5+？のオブジェクトからのクエリパラメータでURL文字列を作成する方法

angularurlangular5
10
Alexei

RouterとUrlSerializerのみを使用できます。

constructor(private router: Router, private serializer: UrlSerializer) {
  const tree = router.createUrlTree([], { queryParams: { foo: 'a', bar: 42 } });
  console.log(serializer.serialize(tree)); // "/?foo=a&bar=42"
}

デモを参照してください： https://stackblitz.com/edit/angular-basic-template-3hx9at?file=src/app/hello.component.ts

13
martin

最終的にAngularのルーティングモジュールをナビゲートしたい場合は、queryParamsで直接使用できます。

let params = {
  param1: param1Value,
  param2: param2Value
};

this.router.navigate('/segment1/segment2', { queryParams: params });

静的URLの場合：

let params = new HttpParams();
params = params.set('param1', param1Value);
params = params.set('param2', param2Value);

let URL = 'yourEndPoint/segment1/segment2?' + params.toString();
8
Prachi

このようにしてみてください：

  let httpParams = new HttpParams().set('params1', String(id));
  httpParams = httpParams.set('params2', String(name));

  return this.httpClient.get<any>(this.BASE_URL, {
          params: httpParams
        });
1
Gobu CSG

次のようなデータを取得するために、apiを呼び出しながらURLを作成できます。

GetData(id) {

    this.http.get<User>('http://test.com' + id + '/users')
      .subscribe(data => {
        console.log(data)
      });
}
0
yer