Question

我有两个作为独立组件创建的ngx-bootstrap模式（不带有模板变量）-登录模式和注册模式。每个模式都有各自独立的组件，这些组件位于我的共享模块中，可以从其他模块中调用。但问题是这些模式之间可以相互调用-您可以从登录模式中单击一个按钮，该按钮必须为您带来注册模式，反之亦然。当我尝试使用BsModalService进行此操作时，由于我已将登录组件导入到注册组件中，并将注册组件导入了登录组件中，因此出现了循环依赖性错误。

我试图将这种模式切换逻辑用于服务中，希望我不会得到循环依赖，但这没有帮助。

   import { Component, OnInit } from '@angular/core';
   import { FormGroup, FormBuilder, Validators } from '@angular/forms';
   import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
   import { UserService } from 'src/app/core/services';
   import { User } from 'src/app/core';
   import { RegisterModalComponent } from '../register-modal/register-modal.component';

@Component({
  selector: 'app-login-modal',
  templateUrl: './login-modal.component.html',
  styleUrls: ['./login-modal.component.css']
})
export class LoginModalComponent implements OnInit {

  loginForm: FormGroup = this.fb.group({
      // form definition
  });

  constructor(
    public loginModalRef: BsModalRef,
    private fb: FormBuilder,
    private router: Router,
    private user: UserService,
    private modalService: BsModalService
  ) { }

  ngOnInit() {
  }

  onSubmit() {
     // form submit code ...
    // hide the current modal
    this.loginModalRef.hide();
  }

  openRegisterModal() {
    // hide the current modal
    this.loginModalRef.hide();
    // open the new modal
    this.modalService.show(RegisterModalComponent, {
      animated: true,
      class: 'modal-lg'
    });
  }
}

由于另一面的情况类似，因此我仅包含了登录模式中的代码。

Answer 1

仅需提及的是，作为一个临时解决方案，我只制作了一个模态组件以用作模态，然后将登录和注册组件重构为常规组件，因此可以将其包含在模态中并进行切换ngIf取决于我调用模态的参数。

如何在不具有循环依赖关系的情况下从另一个模态组件内部打开模态组件？

1 个答案: