Angular-Material 對話框模塊中的循環依賴

Question

我正在使用 Angular 8，我有一個登錄模式，其中包含指向注冊模式的鏈接，反之亦然。 兩種模式都是從 authService 打開的。 問題是 authService 需要引用登錄和注冊組件才能打開它們。 我只是找不到一種方法來避免那里的循環依賴。

我搜索了 google 和 stackoverflow，我找到的最佳解決方案是停用 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();
  }
}

這是錯誤消息：

檢測到循環依賴項中的警告：src\\app\\auth\\auth.service.ts -> src\\app\\auth\\login\\login.component.ts -> src\\app\\auth\\auth.service.ts

檢測到循環依賴項中的警告：src\\app\\auth\\login\\login.component.ts -> src\\app\\auth\\auth.service.ts -> src\\app\\auth\\login\\login.component.ts

檢測到循環依賴項中的警告：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

包裝器組件也可能采用登錄組件內部的一些邏輯，以獲得更好的模塊化。

另一種選擇是一種遠程服務，它被注入到身份驗證服務和登錄組件中

@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();
  }
}

和 auth 服務訂閱這些信號並且登錄/注冊組件觸發它們，這樣您就不再需要將 auth 注入登錄。

您通常會遇到一個結構性問題，即您使用服務從必須以某種方式解決的組件中實例化和銷毀組件。 通常帶有包裝器或遙控器。