angular - 如何在 Angular 9 中的所有组件中使用带有表单的单个模式？

Question

Angular 版本:9(使用 ngbModal 和 ngbootstrap)
我正在研究一种在我的 Angular 应用程序中创建登录和注册功能的方法
截至目前，
我的 NavbarComponent 中有登录代码，它在所有其他组件中都可见。
导航栏组件.ts

constructor(
        private formBuilder: FormBuilder,
        private userService: UserService,
        private sessionService: SessionStorageService,
        private constant: AppConstants,
        private modalService: NgbModal,
      ) {
        this.createLoginForm();
      }     
    
openLoginModal(content: any) {
            this.createLoginForm()
            this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', backdrop: 'static' 
            }).result.then((result) => {
              this.closeResult = `Closed with: ${result}`;
              this.login()
            }, (reason) => {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            });
          }
   
createLoginForm() {
        this.loginform = this.formBuilder.group({
          email: [null, [Validators.required, Validators.pattern(/\S+@\S+\.\S+/)]],
          password: [null, [Validators.required,
          Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]]
        })
      }

在模态提交时，登录方法会将数据添加到 session 存储中，一切正常
现在，我希望人们无需登录即可查看内容，并且仅在他们想要添加内容时才需要登录。因此，我希望这个登录功能在我的所有组件中。
当用户单击某个其他组件上的 POST 按钮时，应显示此登录模式，并且必须在登录单击时提交表单，现有页面中的其他内容不应更改。
我可以在所有组件中使用单独的模态，但这会极大地违反 干 原则
我对此进行了大量研究，有些人建议为它创建一个不同的模块，有些人建议创建一个新组件。我没有找到任何特定于案例的内容。
那么，在了解案例之后，对此的最佳解决方案是什么？
编辑 :-
navbar.component.html 有一个登录按钮。单击它时，将出现登录模式(其中有一个登录表单)
我想通过单击某些 xyz.component.html 上的添加按钮来打开此模态(具有模态的形式和其他功能)
PS:感谢您的时间。如果我做错了什么，我也欢迎原子级别的更改。

Answer 1

如果您在应用程序的每个模块中导入导航组件，那么它应该位于共享模块中。如果是这种情况，您应该只添加一个登录组件，它本身就是一个模态。然后使用简单的 onclick 函数打开该组件。
如果它不在共享模块中，我只需创建一个登录组件并将其放置在与导航相同的模块中。通过单击导航中的登录，您的登录组件也将可用。