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

我有一个引导模式窗口，需要单击按钮才能打开，效果很好。现在，我想从其他组件打开相同的模态窗口，我尝试了一些方法，但是它不起作用，以下是我的代码，

<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);
   }

任何帮助深表感谢。
提前致谢!!

最佳答案

从第二次尝试显示对话框开始，很明显，您正在使用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