Как я могу применить 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. Может быть, вы должны проверить это.

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

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

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

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