Question

我需要关闭一个模态并在Angular5 Web应用程序中显示另一个模态。我正在使用Jquery的bootstrap组件。

$('#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";
  }
}

显示并打开引导模态

2 个答案: