Angular 5如何生成一系列可观察的运算符，如函数，以避免多次重写代码？

我跟着这个话题走了。 我写了我自己的应用程序，但我的应用程序有不止一个自动搜索输入，大约有5或6个自动搜索输入，像这样，每个输入都有自己的url地址来搜索，我的问题是我必须写5或6次相同的代码，这里是我的代码

this.myForm.get('input1').valueChanges
  .pipe(
  debounceTime(100),
  distinctUntilChanged(),
  filter(term => term.length > 0),
  switchMap(term => this.searchSevice.filter(term, option1),
  takeUntil(this.ngUnsubscribe)
  )
  .subscribe(result => this.array1filtered = result);

this.myForm.get('input2').valueChanges
  .pipe(
  debounceTime(100),
  distinctUntilChanged(),
  filter(term => term.length > 0),
  switchMap(term => this.searchSevice.filter(term, option2),
  takeUntil(this.ngUnsubscribe)
  )
  .subscribe(result => this.array2Filtered = result);

this.myForm.get('input3').valueChanges
  .pipe(
  debounceTime(100),
  distinctUntilChanged(),
  filter(term => term.length > 0),
  switchMap(term => this.searchSevice.filter(term, option3),
  takeUntil(this.ngUnsubscribe)
  )
  .subscribe(result => this.array3Filtered = result); ... and go on many input fields next

我的问题是如何避免这种情况？无论如何，要声明函数或角度服务，请使用这些可观察运算符链和一个或多个参数，以便随时使用，而不是多次重写相同的代码

---

谢谢

您可以为这种情况编写自己的操作员：

const ownOperator = (option) => <T>(source: Observable<T>) => source.pipe(
    debounceTime(100),
    distinctUntilChanged(),
    filter(term => term.length > 0),
    switchMap(term => this.searchSevice.filter(term, option),
    takeUntil(this.ngUnsubscribe)
)

---

您可以为这种情况编写自己的运算符：

const ownOperator = (option) => <T>(source: Observable<T>) => source.pipe(
    debounceTime(100),
    distinctUntilChanged(),
    filter(term => term.length > 0),
    switchMap(term => this.searchSevice.filter(term, option),
    takeUntil(this.ngUnsubscribe)
)

---

您可以创建一个函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

使用函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

或者，如果要内联lambda函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

---

您可以创建一个函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

使用函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

或者，如果要内联lambda函数：

forInput(input: AbstractControl, option:any) {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

this.forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
this.forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

let forInput = (input: AbstractControl, option:any) => {
   return input.valueChanges
     .pipe(
         debounceTime(100),
         distinctUntilChanged(),
         filter(term => term.length > 0),
         switchMap(term => this.searchSevice.filter(term, option2),
         takeUntil(this.ngUnsubscribe)
     );
}

forInput(this.myForm.get('input1'), option1)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input2'), option2)
    .subscribe(result => this.array1filtered = result);
forInput(this.myForm.get('input3'), option3)
    .subscribe(result => this.array1filtered = result);

---

只需制作一个包含3个参数的包装器方法：输入、选项和数组，然后调用上面的代码并将参数放在正确的位置？非常感谢，我将尝试制作一个包含3个参数的包装器方法：输入、选项和数组，然后调用上面的代码并将参数放在正确的位置？非常感谢，我将尝试，我必须将一种类型的输入作为AbstractControl而不是FormControl。如果我在ngOnInit中订阅并取消订阅Ngondestory，或者在Focus上订阅输入事件并取消订阅onblur事件，哪种方式更好？我会取消订阅ngOnDestroyHi，我必须将一种类型的输入作为AbstractControl而不是FormControl。如果我在ngOnInit中订阅并取消订阅Ngondestory，或者在Focus上订阅输入事件并取消订阅onblur事件，哪种方式更好？我会取消订阅Ngondestory