我有一个名为 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，但不知道如何使用它。
请帮助我!
最佳答案
在组件中
get isInValidating(): boolean {
return this.formService.isInValidating;
}
在模板中
<button type="submit" [disabled]="isInValidating">Submit</button>
关于javascript - 如何仅当组件 Angular 4 中的服务变量状态更改时才运行函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45841778/