如何从 Angular 8 中的其他组件打开 bootstrap 模态 window？

Question

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

<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 足以将您的视图绑定到模型

问题

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

<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

Answer 2

最好用ngx-boostrap

添加ngx-bootstrap如下：

ng add ngx-bootstrap  --component modals

必须在app.module.ts中导入ModalModule如下

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(){}
}

如何从 Angular 8 中的其他组件打开 bootstrap 模态 window？

How to open a bootstrap modal window from other component in Angular 8?

javascript

modal-dialog

typescript

bootstrap-4

angular

问题

解决方案