如何使用查询参数？

Question

这里我有一个类项目，我需要创建一个 Booksite，其中有一些书籍信息。现在书籍的信息是从一个 url 获取的。

 myurl  = "http://advjavaapp-env.imadbprai6.us-west- 
2.elasticbeanstalk.com/booksapp/books";

现在我已经获取了详细信息..但是在 Booksite 中有一个导航栏，其中包含诸如 Newarrivals、Select Genre（这是带有选项 Children、Fiction、Mystery 的下拉菜单）和 All Books 等选项。我必须使用 queryParam 来显示根据名称的结果。条件是

对于所有图书，显示的 URL 是 /books。数据是从 myurl/booksapp/books 获取的，其中 myurl 是
http://advjavaapp-env.imadbprai6.us-west-2.elasticbeanstalk.com

Books by Genre 是一个包含 Fiction、Children、Mystery 的下拉列表。显示的 URL 是 /books/selopt，其中 selopt 是下拉列表中的选定选项。数据来自 myurl/booksapp/books/selopt。

对于新品，显示的 URL 是 /books?newarrival=yes。数据来自 myurl/booksapp/books?newarrival=yes

请帮我解决这个问题，因为我从前两天开始尝试这样做。

到目前为止我所做的工作..

在 Booksdetails.Component.ts 中

myurl   = "http://advjavaapp-env.imadbprai6.us-west- 
 2.elasticbeanstalk.com/booksapp/books";

url: URL[] = [];
showmyurl: URL[] = [];
newarrival: string;
url1: string = this.myurl + '?newarrival' + this.newarrival;

ngOnInit() {
  this.route.queryParamMap.subscribe(params => {
  console.log(params);
  this.newarrival = params[ 'newarrival' ];
   });
}

 new(){
   this.netService.getData(this.url1)
   .subscribe(resp => {
    this.showmyurl = resp;
    })
  }

Answer 1

把你的代码改成下面的

ngOnInit() {
   this.route.queryParamMap.subscribe(params => {
   console.log(params);
   this.newarrival = params.params[ 'newarrival' ];
  });
}

new(){
 this.url1 = this.myurl + '?newarrival=' + this.newarrival;
 this.netService.getData(this.url1)
 .subscribe(resp => {
  this.showmyurl = resp;
   })
}