Angular 11 : 循环依赖

Question

这是我在 Typescript 中的错误：

Warning: Circular dependency detected: src\app\components\elements\modal\update-keyword-modal\update-keyword-modal.component.ts -> src\app\components\elements\validator\unique-keyword-name-validator.ts -> src\app\services\keyword\keyword.service.ts -> src\app\components\elements\modal\update-keyword-modal\update-keyword-modal.component.ts

我明白这个错误，但我很难解决:(

update-keyword-modal.component.ts 取决于 unique-keyword-name-validator.ts

import { UniqueKeywordNameValidator } from '../../validator/unique-keyword-name-validator';

  constructor(
    private formBuilder: FormBuilder,
    private fileUtils: FileUtils,
    private uniqueKeywordName: UniqueKeywordNameValidator,
    private dialogRef: MatDialogRef<UpdateKeywordModalComponent>,
    @Inject(MAT_DIALOG_DATA) data) {
    this.name = data.keyword.name;
  }

      ngOnInit(): void {
        this.updateKeywordForm = this.formBuilder.group({
          keywordName: [this.name, [Validators.required], [this.uniqueKeywordName.keywordNameValidator(this.name)], ['blur']]
        });
      }

唯一关键字名称-validator.ts 取决于 keyword.service.ts

import { KeywordService } from "src/app/services/keyword/keyword.service";

  constructor(private keywordService: KeywordService) {}

       keywordNameValidator(oldname : string): AsyncValidatorFn {
          return (control: AbstractControl): Observable<ValidationErrors | null> => {
            return this.keywordService.checkUniqueName(control.value).pipe(
              map(res => {
                if (oldname == control.value) {
                    res = false;
                }
                  // if res is true, keywordName exists, return true
                  return res ? { uniqueKeyword: true } : null;
                  // NB: Return null if there is no error
                
              })
            );
          };
        }

keyword.service.ts 取决于更新关键字-modal.component.ts

import { UpdateKeywordModalComponent } from 'src/app/components/elements/modal/update-keyword-modal/update-keyword-modal.component';

      const modalDialog = this.matDialog.open(UpdateKeywordModalComponent, dialogConfig);
        return modalDialog.afterClosed();

你能帮我解决这个问题吗？

Answer 1

这不是 angular 特定问题，而是更多应用程序设计特定问题。

如果有两个服务导致此问题，您可以在构造函数中使用 Injector 并通过它调用服务，但由于这不是问题，您可以尝试保留加载 UpdateKeywordModalComponent 的方法在另一个服务中使用模式或保留在 unique-keyword-name-validator.ts 中并在 keyword.service.ts.

响应时使用它

这可以帮助您避免该问题。

Angular 11 : 循环依赖

Angular 11 : circular dependency

angular

typescript

circular-dependency