即使安装了所有东西，如何解决引导程序不起作用的问题？答案

【问题标题】：How to fix a problem that bootstrap does not work even though everything is installed?即使安装了所有东西，如何解决引导程序不起作用的问题？
【发布时间】：2021-04-18 20:38:49
【问题描述】：

我正在尝试使用引导程序创建弹出框为我安装的库是以下版本为什么他不给我看设计？有谁知道可能是什么问题？

package.json*

 "private": true,
      "dependencies": {
        "@angular/animations": "~11.0.1",
        "@angular/cdk": "^11.0.2",
        "@angular/common": "~11.0.1",
        "@angular/compiler": "~11.0.1",
        "@angular/core": "~11.0.1",
        "@angular/fire": "^6.1.4",
        "@angular/forms": "~11.0.1",
        "@angular/platform-browser": "~11.0.1",
        "@angular/platform-browser-dynamic": "~11.0.1",
        "@angular/router": "~11.0.1",
        "@ng-bootstrap/ng-bootstrap": "^8.0.2",
        "@types/jquery": "^3.5.5",
        "bootstrap": "^4.5.3",
        "bootstrap-icons": "^1.1.0",
        "firebase": "^8.1.2",
        "jquery": "^3.5.1",
        "popper.js": "^1.16.1",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.10.2"
      },

ANGULAR.JSON 文件：

    "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

我的代码： APP.COMPONENT.TS 文件：

import { Component } from '@angular/core';
declare var $:any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
      $('[data-toggle="popover"]').popover();
  }
}

**APP.COMPONENT.HTML FILE:**

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

It looks like this Should look like this

【问题讨论】：

标签： css angular typescript angular8 angular-ui-bootstrap

【解决方案1】：

我建议在组件生命周期的AfterContentInit 部分初始化您的弹出框。这让组件有机会渲染 DOM，jQuery 依靠它来选择弹出框元素。

导入AfterContentInit 代替OnInit 并实现：

ngAfterContentInit(): void {
  $('[data-toggle="popover"]').popover();
}

更多关于 Angular 组件的生命周期：https://angular.io/guide/lifecycle-hooks

【讨论】：

问题仍然存在于 Bootstrap 的设计演示中有人知道问题是什么吗？
我不确定。我也没有使用过 ng-bootstrap，我看到它在你的依赖项中，可能会影响默认的引导功能，但不要引用我的话。
好的，谢谢！
对不起，我之前没有想到这一点，但可能是您的组件的 ViewEncapsulation 覆盖了 Bootstrap。尝试将您的 ViewEncapsulation 设置为 None 以允许您的组件由外部资源设置样式

【解决方案2】：

尝试在 styles.scss 文件中添加它

@import "~bootstrap/dist/css/bootstrap.css"

【讨论】：