Question

我在我的应用程序中使用ngx-bootstrap模式。我需要访问登录＆amp;从applcation的任何地方注册模态，所以我写了一个服务并使用该服务访问模态。

但我无法在相应的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

这是我的第一个答案，所以我希望它对您有所帮助。 ;）

“模态对话框”-class不属于您的login.component.html，因此这里不能应用任何样式。 “modial-diaolog”的类样式设置在bootstrap.css文件中，以及vendor-prefixes.less文件中。也许你应该检查一下。

另一方面，循环依赖性导致登录组件（正如您已经知道的那样）取决于注册组件，反之亦然。

问问自己：这真的有必要吗？注册和登录的单个组件不会这样做吗？在这两种情况下，用户界面都很相似，如果你真的需要，你可以调用两种不同的服务。这将摆脱你的循环依赖。

另一种方法是使用服务来处理登录和signUp之间的切换。像遥控开关一样。

希望这能帮到你！

如何将css应用于模态对话框以及如何修复循环依赖性警告

1 个答案: