如何在Angular 9的所有组件之间使用具有形式的单一模态？

如何解决如何在Angular 9的所有组件之间使用具有形式的单一模态？

Angular版本：9（使用ngbModal和ngbootstrap）

我正在研究一种在我的角度应用程序中创建登录和注册功能的方法

截至目前， 我的NavbarComponent内部有登录代码，在所有其他组件中都可见。

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.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]]
        })
      }

在模式提交时，登录方法会将数据添加到会话存储中，并且一切正常

现在，我希望人们无需登录即可查看内容，并且仅在需要添加某些内容时才需要登录。因此，我希望此登录功能包含在我的所有组件中。

当用户单击某个其他组件上的POST按钮时，应显示此登录模式，并且在单击登录时必须进行表单提交，现有页面中的其他任何内容都不应更改。

我可以在所有组件中使用单独的模态，但这会极大地违反 DRY 原则 我对此进行了大量研究，有人建议为此创建一个不同的模块，有人建议使用一个新组件。我没有发现任何具体情况。

那么，了解情况之后，对此的最佳解决方案是什么？

修改：- navbar.component.html有一个登录按钮。单击后，将出现登录模式（具有登录表单） 我想通过单击某些xyz.component.html

上的添加按钮来打开此模式（具有表单和模式的其他功能）

P.S：谢谢您的宝贵时间。如果我做错了事，我也欢迎在原子级别上进行更改。

解决方法

如果要在应用程序的每个模块中导入导航组件，则它应位于共享模块中。如果是这种情况，您应该只添加一个登录组件，而该组件本身就是模式组件。然后使用简单的onclick函数打开该组件。

如果它不在共享模块中，那么我将创建一个登录组件并将其放置在与导航相同的模块中。通过单击导航中的登录，您的登录组件也将可用。

,

我认为您可以使用Angular CanActivate路由器Guard来实现。可以在Angular网站或google上找到更多信息。

https://angular.io/api/router/CanActivate

这是我在Google上找到的链接，可能会为您提供一些帮助。

http://gnomeontherun.com/2017/03/02/guards-and-login-redirects-in-angular/