javascript - 如何从 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 所述不要在 Angular 应用程序中使用 JQuery Angular 足以将您的 View 绑定(bind)到模型

问题

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

<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>

See this solution on stackblitz