时间戳

首页 > 解决方案 > 避免引用未绑定的方法，这可能会导致无意的 `this` 作用域

angular - 避免引用未绑定的方法，这可能会导致无意的 `this` 作用域

问题描述

嗨，关于如何预防的任何想法

错误避免引用未绑定的方法，这可能会导致this @typescript-eslint/unbound-method 的无意范围

16:41  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  16:62  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  17:34  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:35  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:56  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  20:40  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  21:46  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method


import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  registrationForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.registrationForm = new FormGroup({
      companyName: new FormControl('', [Validators.required, Validators.email]),
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormGroup({
        password: new FormControl('', [Validators.required, Validators.minLength(8)]),
        repeatPassword: new FormControl('', [Validators.required])
      }, {validators: [this.passwordMismatchValidator()]})
    });
  }

  onRegistrationFormSubmit() {
    if (!this.registrationForm.valid) {
      return;
    }
  }

  passwordMismatchValidator(): ValidatorFn {
    return (c: AbstractControl): ValidationErrors | null => {
      const password = c.get('password')?.value;
      const repeatPassword = c.get('repeatPassword')?.value;

      if (password !== repeatPassword) {
        return {'passwordMismatch': true};
      }

      return null;
    };
  }
}

标签： angular

解决方案

看到这个问题。您似乎必须执行以下操作之一：

  • Angular 库从静态方法更改为静态箭头函数属性。
  • this: voidAngular 库用我们可以在这条规则中构建处理的东西来注释它的函数。
  • 你，用户，禁用评论。

目前我想唯一的解决方案是在行/文件/项目级别完全禁用规则，或者将严重性从错误更改为简单警告。

对于前一种情况，只需添加以下内容：

  • 在给您错误的行之前（仅在该行禁用错误）：

    // eslint-disable-next-line @typescript-eslint/unbound-method

  • 在显示错误的文件顶部（禁用整个文件中的错误）：

    /* eslint-disable @typescript-eslint/unbound-method */

    如果您只想通过以下行跳过一个部分，您也可以在同一个文件中再次启用它：

    /* eslint-enable @typescript-eslint/unbound-method */

  • 在rules您的 eslint 配置文件（即.eslintrc.json）部分（以禁用整个项目中的错误）：

    "@typescript-eslint/unbound-method": "off"

在后一种情况下，将以下内容放在ruleseslint 配置文件（即.eslintrc.json）的部分（以在整个项目中显示警告而不是错误）：

"@typescript-eslint/unbound-method": "warn"

编辑：对于 Angular Validators.*，您也可以覆盖 eslint 配置文件中的规则（请参阅文档）：

"@typescript-eslint/unbound-method": [
    "error",
    {
        "ignoreStatic": true
    }
],

推荐阅读