在没有NgbModule的情况下，通过angular(.ts)中的javascript使用boostrap模态

Question

我想自定义和组件，以便与UI交互。我已经更改了所有必要的文件，但在我的新组件中，我不知道如何导入，所以引导类在typescript中可以识别。我只是从javascript迁移到typescript，所以这就是发生的事情。

import { Component, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html'
})
export class ModalComponent implements OnInit {
modal: any;
shown: false;
constructor() {
this.modal= new bootstrap.modal('#id', {
keyboard: true
});
this.shown= false;
}
ngOnInit(): void {
console.log('modal on init');
}
onClick(): void {
}
}

Answer 1

以下是一些关于如何在应用程序中打开ng引导模式的快速指南：

1. 通过运行ng add @ng-bootstrap/ng-bootstrap将ng-bootstrap添加到角度应用程序中
2. 将NgbModalModule添加到app.module.ts的导入数组中
3. 创建一个包含模态内容的新组件(通过运行ng g c your/component/path/componentName
4. 将ng bootstrap的模态服务传递到要打开模态的组件，方法是将其注入构造函数：constructor(private modalService: NgbModal) {}
5. 在onClick函数中(或者在您想要实际打开模态的任何位置)，包括以下代码：this.modalService.open(ComponentName);