这可能是由于引入ng-bootstrap和设置bootstrap样式文件的方式不正确导致的。可以尝试以下步骤解决此问题:
确保在angular.json文件中正确引入了bootstrap样式文件。
在styles数组中添加下面一行:
"node_modules/bootstrap/dist/css/bootstrap.min.css"
在模块中导入ng-bootstrap模块。
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({ declarations: [ AppComponent, ... ], imports: [ BrowserModule, NgbModule.forRoot(), ... ], bootstrap: [AppComponent] })
在组件中使用ng-bootstrap模态框。
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent {
constructor(private modalService: NgbModal) {}
open(content) { this.modalService.open(content); }
})
通过以上步骤,应该能够正确加载ng-bootstrap模态框的CSS类。