Как я могу применить CSS к модальному диалогу и как я могу исправить предупреждение о круговой зависимости

Question

Я использую ngx-bootstrap модалы в моем приложении.Мне нужно получить доступ к модальности входа и регистрации из любой точки приложения, поэтому я написал один сервис и обращаюсь к модам с помощью этого сервиса.

Но я не могу изменить стили для modal-dialog в соответствующем файле component.css.А также у меня локальное предупреждение

WARNING in Circular dependency detected:
src/app/login/login.component.ts -> src/app/signup/signup.component.ts 
-> src/app/login/login.component.ts

WARNING in Circular dependency detected:
src/app/signup/signup.component.ts -> src/app/login/login.component.ts 
-> src/app/signup/signup.component.ts

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

app.component.ts
openLogin() {
    this.myService.loginModalRef = 
    this.modalService.show(LoginComponent);
}

login.component.ts
openSignUp() {
    this.myService.loginModalRef.hide();
    this.myService.signupModalRef = 
    this.modalService.show(SignupComponent);
}

signup.component.ts
openLogin() {
    this.myService.signupModalRef.hide();
    this.myService.loginModalRef = this.modalService.show(LoginComponent);
}

modals-service.service.ts
constructor(
    public loginModalRef: BsModalRef,
    public signupModalRef: BsModalRef,
    private modalService: BsModalService
) { }

Для получения полного кода, пожалуйста, посетите StackBlitz

Answer 1

Это мой первый ответ, поэтому я надеюсь, что он будет вам полезен. ;)

Класс "modal-dialog" не принадлежит вашему login.component.html, поэтому здесь нельзя применять стили. Стили класса "modial-diaolog" устанавливаются в файле bootstrap.css, а также в файле vendor-prefixes.less. Может, тебе стоит это проверить.

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

Спросите себя: действительно ли это необходимо? Разве один компонент для регистрации и входа не сработает? Интерфейс пользователя похож в обоих случаях, и вы можете просто позвонить в две разные службы, если вам действительно нужно. Это избавит вас от круговой зависимости.

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

Надеюсь, это поможет вам!