Как открыть модальный компонент из другого модального компонента без круговой зависимости? - PullRequest
Новая
       43

Как открыть модальный компонент из другого модального компонента без круговой зависимости?

0 голосов
/ 07 июня 2019

У меня есть два модальности ngx-bootstrap, созданные как отдельные компоненты (не с переменными шаблона) - модальный логин и модальный регистр.Каждый из модалов имеет отдельные компоненты, которые находятся в моем общем модуле и могут вызываться из других модулей.Но дело в том, что у этих модалов есть возможность вызывать друг друга - вы можете нажать кнопку на модале входа в систему, которая должна принести вам модал Register и наоборот.Когда я пытаюсь сделать это, используя 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'
    });
  }
}

Я включилтолько код из модального имени входа, так как ситуация на другой стороне похожа.

1 Ответ

0 голосов
/ 07 июня 2019

Просто чтобы упомянуть, что в качестве временного решения я просто создал один модальный компонент для выполнения этой цели как модальный, и я реорганизовал компоненты login и register, чтобы они были похожи на обычные компоненты, чтобы я мог включать их в модальные и переключать их с помощью ngЕсли в зависимости от параметров, с которыми я вызываю модал.

...