如何从 Angular 8 中的其他组件打开引导模式窗口？

Question

我有一个需要在单击按钮时打开的引导模式窗口，它工作正常。 现在，我想从不同的组件打开相同的模态窗口，我尝试了一些但它不起作用，以下是我的代码，

<section>
    <button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
    
    <div id="signInModal" class="modal fade m-5" role="dialog"
        aria-labelledby="dialog-sizes-name2" data-backdrop="static">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="circularBold signUpHeading">Sign In</h6>
                    <button type="button" class="close" aria-label="Close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form [formGroup]="signInForm">    
                            <div class="mt-4">
                                <button type="button" class="btn buttons nextBtn circularBold w-100" (click)="login()">Log in</button>
                                <p class="black2E circularBook mt-4 font-size12">Don't have an account?
                                    <a href="" class="circularMedium">Sign up</a>
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

TS

  openModal() {
    $('#signInModal').modal('show');
  }

来自其他组件的代码

modalRef: BsModalRef;
 constructor(
    private modalService: BsModalService
  ) { }

   join(){
        this.modalRef = this.modalService.show(SigninComponent);
   }

任何帮助深表感谢。

提前致谢！！

Answer 1

从您第二次尝试显示对话框来看，很明显您正在使用ngx-bootstrap

正如@MikeOne 所述不要在角度应用程序中使用 JQuery Angular 足以将您的视图绑定到模型

问题

我试图重现您的代码并发现出于某种原因，将您的内容包装在下面的代码中似乎使您的代码不显示对话

<section>
    <button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
    
    <div id="signInModal" class="modal fade m-5" role="dialog"
        aria-labelledby="dialog-sizes-name2" data-backdrop="static">
        <div class="modal-dialog modal-md">

          <!-- Other Stuff here -->
        </div>
    </div>
</section>

解决方案

在您的LoginComponent 中只需在下面

<div class="modal-content">
    <div class="modal-header">
        <h6 class="circularBold signUpHeading">Sign In</h6>
        <button
            type="button"
            class="close"
            aria-label="Close"
            data-dismiss="modal"
          >
            <span aria-hidden="true">&times;</span>
          </button>
    </div>
    <div class="modal-body">
        <form [formGroup]="signInForm">
            <div class="mt-4">
                <button
                type="button"
                class="btn buttons nextBtn circularBold w-100"
                (click)="login()"
              >
                Log in
              </button>
                <p class="black2E circularBook mt-4 font-size12">
                    Don't have an account?
                    <a href="" class="circularMedium">Sign up</a>
                </p>
            </div>
        </form>
    </div>
</div>

在 stackblitz 上查看此解决方案

Answer 2

最好使用ngx-boostrap

添加 ngx-bootstrap 如下：

ng add ngx-bootstrap  --component modals

这是强制导入ModalModule在app.module.ts如下

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

创建一个简单的模板 parent.component.ts 文件应该如下

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { TemplateComponent } from './tempalte/template.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './app.component.html'
})
export class ParentComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

 // Here the TemplateComponent includes the modal content. For that I  have created another component name "TemplateComponent" 

  openModal() {
    this.modalRef = this.modalService.show(TemplateComponent);
  }
}

在模板组件中 template.component.ts 文件如下所示

    import { Component } from '@angular/core';
    import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
    selector: 'app-template',
    templateUrl: './template.component.html'
})
export class TemplateComponent implements OnInit {
    constructor(public modalRef: BsModalRef) { }
ngOnInit(){}
}