javascript - 路由器链接中的空查询参数将被忽略，正确吗？ Angular typescript

Question

我有以下变量:

 inputCity;
 inputGuestNumber;
 inputCapacitySelected;
 inputCuisineSelected;
 inputPrivacySelected;
 inputVenueTypeSelected;
 inputAmenitiesSelected;
 inputNeighborhoodSelected;

这些值可能会也可能不会根据用户在表单中输入的内容进行定义。

我有一个设置了查询参数的router.navigate函数。如果查询参数指向的变量未定义或为空，会发生什么情况？

onSubmit(){
    this.router.navigate(['/venue-list', this.inputCity], {
        queryParams:{
           guestCount: this.inputGuestNumber,
           countOption: this.inputCapacitySelected,
           cuisineSelected:this.inputCuisineSelected, 
           privacySelected:this.inputPrivacySelected,
           venueTypeSelected: this.inputVenueTypeSelected,
           amenitiesSelected: this.inputAmenitiesSelected,
           neighborhoodSelected: this.inputNeighborhoodSelected
        }
  });

谢谢!

Answer 1

queryParams 是可选参数，不需要确定组件的路由。但是，如果您像上面一样传递 queryParams 并且某些变量未定义，那么它将请求像这样的路由

localhost:3000/venue-list/:inputCity?guestCount=2&countOption=undefined&cuisineSelected=anyvalue&privacySelected=undefined

空查询参数不会被忽略。所以现在当它打开 field 列表组件时

ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        this.guestcount = +params['guestCount'];
        this.countoption = +params['countOption'];<- in this.countoption you will get undefined
      });
  }

如果为所有查询参数设置一些默认值会更好，以防其中一些参数像这样未定义

subscribe(params => {
    // Defaults to 0 if no query param provided.
    this.guestcount = +params['guestCount'] || 0;
    this.countoption = +params['countOption'] || default_value;
  });

或者使用if条件来检测未定义