angular - 如何使用查询参数？

Question

在这里，我有一个班级项目，我需要在其中创建一个 Booksite，其中有一些 Books 的信息。现在书籍的信息是从一个 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 是一个包含小说、儿童、神秘的下拉列表。显示的 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;
   })
}