显示并打开引导程序模态

Question

我需要关闭一个模式并在Angular5 Web应用程序中显示另一个模式。 我在Jquery中使用引导程序组件。

$('#myModal').modal('show');
$('#myModal1').modal('hide');

我遇到错误Property 'modal' does not exist on type 'JQuery<HTMLElement>'

Answer 1

您需要为新版本安装npm install -D @types/bootstrap ，如果您正在使用webpack，还需要确保您的webpack配置正确。

Answer 2

使用ng-bootstrap使事情变得容易得多

真的很容易使用。

注入NgbModal并使用.open方法打开具有特定组件的模态

import { SecondComponent} from 'second.component';
import { FirstComponent} from 'first.component';

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent {
  constructor(public modalService: NgbModal) {}

  openFirstModal(){
    this.modalService.open(First)
  }

  openSecondModal(){
    // You can also get a reference to the component
    let ref = this.modalService.open(SecondComponent)
    ref.componentInstance.variable = "foo";
  }
}