Question

我有一个同时包含route.params和route.queryParams的URL

.../search/VALUE1?method=VALUE2

我已经创建了路线

{
  path : 'search/:id',
  component: MyComponent
}

组件

export class MyComponent {
...
constructor(private route: ActivatedRoute) {}
ngOnInit() {
  combineLatest(this.route.queryParams, this.route.params)
    .subscribe([queryParams, params] => {
       console.log(ID:' + params('id') + ',M:' +queryParams('method'));
       // code
    })
}

但是有一个问题-当用户同时更改主参数和查询参数时-订阅将被调用两次，例如用户呼叫

.../search/VALUE1?method=VALUE2
.../search/VALUE3?method=VALUE4

控制台日志

ID:VALUE1,M:VALUE2
ID:VALUE3,M:VALUE2   <-- redundant method call
ID:VALUE3,M:VALUE4

如何同时在route.params和route.queryParams上进行订阅，但只能进行一次订阅？

尝试了什么

     private method: string;
//
     ngOnInit() {
       this.route.queryParams.subscribe(
          queryParams => {
             this.method = queryParams['method'];
       });

       this.route.params.subscribe(
          params => {
             console.log(ID:' + params('id') + ',M:' + this.method);
             // code

          }
     }

这很好用。但是我可以确定this.method在订阅时将包含正确的值吗？

Answer 1

要获取参数，您不需要订阅。更改两者时，下面的一个可以很好地工作。

ngOnInit() {

    this.route.queryParams.subscribe( p => {

      console.log("ID :" + this.route.snapshot.params['id'] + ',M:' + p['method'],)

    })
}

同时订阅route.queryParams和route.params

1 个答案: