如何在 Angular 9 中的所有组件中使用带有表单的单一模态？

Question

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

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

截至目前，我的 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.required,
          Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)]]
        })
      }

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

现在，我希望人们无需登录即可查看内容，并且只需要登录即可添加内容。因此，我希望这个登录功能出现在我的所有组件中。

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

我可以在所有组件中使用单独的模态，但这将极大地违反 DRY 原则我对此进行了很多研究，有人建议为其创建一个不同的模块，有人建议使用一个新组件。我没有找到任何具体案例。

那么，在了解了案例之后，最佳解决方案是什么？

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

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

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

Answer 1

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

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

Answer 2

我认为您可以通过使用 Angular CanActivate router Guard 来实现。更多信息可以在 angular 站点或 google.

上找到

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

这是我在 google 上找到的 link，可能会给你一些帮助。

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

如何在 Angular 9 中的所有组件中使用带有表单的单一模态？

How to use a single modal with form across all components in Angular 9?

angular-ngmodel

angular

angular-reactive-forms

angular9