Angular-Material 对话框模块中的循环依赖

Question

我正在使用 Angular 8，并且我有一个带有 link 到注册模式的登录模式，反之亦然。两种模式都是从 authService 打开的。问题是 authService 需要引用登录和注册组件才能打开它们。我只是找不到避免循环依赖的方法。

我搜索了 google 和 Whosebug，我找到的最佳解决方案是停用 angular.json 文件中的循环依赖警告，这不是我正在寻找的解决方案. 我缩短了 3 个相关文件以仅显示相关代码。一切正常，我只是想摆脱错误消息，以后不会遇到任何意外问题，我会尝试找出正确的方法。

export class AuthService {
  loginModalRef: MatDialogRef<LoginComponent>;
  signupModalRef: MatDialogRef<SignupComponent>;

  constructor(
    private dialog: MatDialog
    ) {}

  closeLoginModal(): void {
    this.loginModalRef.close();
  }

  closeSignupModal(): void {
    this.signupModalRef.close();
  }

  openLoginModal(): void {
    if (this.signupModalRef) {
      this.closeSignupModal();
    }
    this.loginModalRef = this.dialog.open(LoginComponent, {panelClass: 'login-dialog'});
  }

  openSignupModal(): void {
    if (this.loginModalRef) {
      this.closeLoginModal();
    }
    this.signupModalRef = this.dialog.open(SignupComponent, {panelClass: 'signup-dialog'});
  }
}


export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(
    private authService: AuthService
  ) {}

//when user clicks on 'Signup instead'
  openSignupModal() {
    this.authService.openSignupModal();
  }
}



@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  constructor(
    private authService: AuthService
  ) {}

// when user clicks on 'Login instead'
  openLoginModal() {
    this.authService.openLoginModal();
  }

// when user clicks on 'Terms of Services' the modal closes
  closeSignupModal() {
    this.authService.closeSignupModal();
  }
}

这是错误信息：

WARNING in Circular dependency detected: src\app\auth\auth.service.ts -> src\app\auth\login\login.component.ts -> src\app\auth\auth.service.ts

WARNING in Circular dependency detected: src\app\auth\login\login.component.ts -> src\app\auth\auth.service.ts -> src\app\auth\login\login.component.ts

WARNING in Circular dependency detected: src\app\auth\signup\signup.component.ts -> src\app\auth\auth.service.ts -> src\app\auth\signup\signup.component.ts

Answer 1

您可能应该在这里稍微调整一下您的应用程序，以便您的登录和注册组件由模态组件包装。

@Component({
  template: `<app-login></app-login>`
})
export class LoginModalComponent { .. whatever in here, maybe something useful .. }

然后您的服务将实例化 LoginModalComponent

this.loginModalRef = this.dialog.open(LoginModalComponent, {panelClass: 'login-dialog'});

这样就避免了 LoginComponent -> AuthService 和 AuthService -> LoginComponent 的循环依赖，

现在是 LoginModalComponent -> AuthService -> LoginComponent

包装器组件也可能采用登录组件中的一些逻辑以实现更好的模块化。

另一个选项是一种远程服务，它被注入到 auth 服务和登录组件中

@Injectable()
export class ModalRemoteService {
  private closeLoginSource = new Subject();
  closeLogin$ = this.closeLoginSource.asObservable();
  private openLoginSource = new Subject();
  openLogin$ = this.openLoginSource.asObservable();

  closeLoginModal(): void {
    this.closeLoginSource.next();
  }

  openLoginModal(): void {
    this.openLoginSource.next();
  }
}

授权服务订阅这些信号，登录/注册组件触发它们，这样您就不再需要将授权注入登录。

您通常会遇到一个结构性问题，即您使用服务从您必须以某种方式解决的组件中实例化和销毁组件。通常带有包装器或遥控器。

Angular-Material 对话框模块中的循环依赖

Circular Dependancy in Angular-Material Dialog Module

circular-dependency

typescript

angular-material

angular