使用 Angular 中的参数生成 URL 的正确方法

Question

我正在尝试使用从表单（反应式表单）收到的数据生成一个字符串（将通过连接 apiUrl + queryParams 形成）。 我已经找到了解决方案，但我认为这是有史以来最丑陋和最不专业的东西。 接下来我提供一些代码。

组件.ts

stringFinal : string = ''

this.myForm= this.fb.group({
      input1: new FormControl(),
      input2: new FormControl(),
      input3: new FormControl(),
      
    });

generateUrl() {
    let qry1 = this.myForm.get("input1")?.value
    let qry2 = this.myForm.get("input2")?.value
    let qry3 = this.myForm.get("input3")?.value
    
    if(qry1 != null) {
      this.stringFinal += `qry1=${qry1}&`
    }

    if(qry2 != null) {
      this.stringFinal += `qry2=${qry2}&`
    }

    if(qry3 != null) {
      this.stringFinal += `qry3=${qry3}&`
    }
    
    console.log(this.stringFinal);
  }

这很好用，但它不是真正可扩展的，如果我想在未来向表单添加 50 个输入，我将不得不手动添加 50 个更多条件。

此外，在某些情况下，我不仅会从表单接收字符串，还会接收对象，在这种情况下，我将无法检索数据。 我提供一个例子。

input4: (2) [{...},{...}]

我的问题是2：

1. 如何在不执行我展示的操作的情况下改进 URL 一代。
2. 当我收到数组而不是字符串时，如何检索特定字段（例如名称）。

Answer 1

您可以通过迭代 FormGroup 的controls属性来改进FormGroup生成：

stringFinal: string = "";

generateUrl() {
  for(const control in this.myForm.controls){
    const val = this.myForm.controls[control].value;
    if(val !== null){
      this.stringFinal += `${control}=${val}&`;
    }
  }
}

如果表单中不仅有字符串，还有对象作为值，则必须首先验证控件值的类型，例如使用类型保护：

interface Person 
  name: string;
  id: number;
}

function isPerson(a_obj: any): a_obj is Person {
  return `name` in a_obj && 'id' in a_obj;
}

总而言之：

interface Person {
  name: string;
  id: number;
}

stringFinal: string = "";

generateUrl() {
  for(const control in this.myForm.controls){
    const val = this.myForm.controls[control].value;
    if(val === null) continue;
    if(isPerson(val)){
        this.stringFinal += `${control}=${val.name}&`;
    } else {
        this.stringFinal += `${control}=${val}&`;
    }
  }
}

function isPerson(a_obj: any): a_obj is Person {
  return `name` in a_obj && 'id' in a_obj;
}