Question

我有一个名为InfoFormService的服务，它有一个名为isInValidating的变量。

当组件调用validateEmail（email）函数时，该变量设置为true，如下所示。

@Injectable()
export class InfoFormService {

    private VALIDATE_EMAIL_URL: string = 'XXX';
    isInValidating: boolean = false;

    constructor(@Inject(APP_CONFIG) private config: AppConfig,
                private http:Http
    ) {

      console.log(this.config.apiEndpoint)

    }

    validateEmail(email) {
      console.log(email)
      this.isInValidating = true;
      return this.http.get(`${this.config.apiEndpoint}/${this.VALIDATE_EMAIL_URL}${email}`)
    }

}

每当电子邮件输入文本发生更改时，组件都会调用validateEmail。

由于ValidateEmail需要时间，当我单击提交按钮时，isInValidating值可能为true或false，但一旦ValidateEmail操作完成，isInValidating值将设置为false，如上面的代码。

我想要的是延迟提交操作，单击“提交”按钮，直到服务的isInValidating值设置为true。

export class AbcBtnComponent implements OnInit {

    constructor(private formService:InfoFormService) {

    }

    ...

    emailField.valueChanges
      .filter(val => {
        return val.length >= 1;
      })
      .debounceTime(100)
      .switchMap(val => this.formService.validateEmail(val))
      .subscribe(res => {

        console.log(res)
        let validation = res.json();

        if (validation['valid']) {
          emailField.setErrors(null);
        } else {
          emailField.setErrors({ validEmail: true });
        }

        this.formService.isInValidating = false;

      });

    onSubmit(value) {
        // Here I want to delay until formService's isInValidating value = true

        submitAction(value)
    }

}

我想我必须使用Subject或Observable，但不知道如何使用它。

请帮助我！

Answer 1

在组件

中

get isInValidating(): boolean {
    return this.formService.isInValidating;
}

在模板中

<button type="submit" [disabled]="isInValidating">Submit</button>

Answer 2

this.formService.validateEmail(val))
      .subscribe(res => {

this.formService.validateEmail(val)
      .subscribe(res => {
..)

从技术上讲，如果您订阅validateEmail调用并在那里执行代码，它应该可以正常工作。但我可能会误解你的问题。

您也可以删除isInValidating并在其中包含onSubmit（value），如：

this.formService.validateEmail(val)).subscribe(res => {
//logic to check your validation
if(valid) this.onSubmit(val)
});

如何在组件Angular4中更改服务变量状态时运行函数

2 个答案: