首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何解决即使安装了所有的东西,引导程序也不能工作的问题?

如何解决即使安装了所有的东西,引导程序也不能工作的问题?
EN

Stack Overflow用户
提问于 2021-01-13 19:30:12
回答 2查看 104关注 0票数 0

我正在尝试使用引导程序创建一个弹出程序库,下面是版本,为什么他不给我看设计呢?有人知道问题出在哪里吗?

package.json*

代码语言:javascript
复制
 "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文件:

代码语言:javascript
复制
    "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文件:

代码语言:javascript
复制
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>

看上去像这样 应该是这样的

EN

回答 2

Stack Overflow用户

发布于 2021-01-13 19:50:51

我建议在组件生命周期的AfterContentInit部分初始化您的弹出。这使组件有机会呈现DOM,jQuery依赖DOM来选择popover元素。

AfterContentInit代替OnInit并实现:

代码语言:javascript
复制
ngAfterContentInit(): void {
  $('[data-toggle="popover"]').popover();
}

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

票数 0
EN

Stack Overflow用户

发布于 2021-01-22 06:47:47

尝试在styles.scss文件中添加以下内容

代码语言:javascript
复制
@import "~bootstrap/dist/css/bootstrap.css"
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65708612

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档