Question

我正在尝试使Bootstrap组件（如工具提示和弹出窗口）与Angular 6配合使用，但它们不想出现。

对于工具提示，我所得到的是： Tooltip example

设置：

// app.component.html
<div style="text-align:center; padding:100px">
<button
    type="button"
    class="btn btn-secondary"
    data-toggle="tooltip"
    data-placement="top"
    title="Tooltip on top">
    Tooltip on top
</button>
</div>

// styles.css
@import '~bootstrap/dist/css/bootstrap.min.css';

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

// package.json
{
  "name": "bootstrap-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

我还用Angular编写了一条指令来初始化工具提示，但是控制台给了我一个错误：

// load-tooltip.directive.ts
import { Directive, ElementRef } from '@angular/core';

declare var $ :any;

@Directive({
  selector: '[appLoadTooltip]'
})
export class LoadTooltipDirective {

  constructor(private el: ElementRef) {
    $(el.nativeElement).tooltip();
  }
}

// console.log
ReferenceError: $ is not defined
    at new LoadTooltipDirective (load-tooltip.directive.ts:11)
    at createClass (core.js:9302)
    at createDirectiveInstance (core.js:9187)
    at createViewNodes (core.js:10407)
    at callViewAction (core.js:10723)
    at execComponentViewsAction (core.js:10642)
    at createViewNodes (core.js:10435)
    at createRootView (core.js:10321)
    at callWithDebugContext (core.js:11352)
    at Object.debugCreateRootView [as createRootView] (core.js:10839)

这是Angular 5的工作示例： Stackblitz Example

那么为什么它在Angular 6中不起作用？谁能指出我正确的方向？

（我不想使用ng-bootstrap或类似名称。）

Answer 1

尝试将指令选择器“ appLoadTooltip”添加到按钮标记中。那应该做。

this.user.fname= //something to get the value of fname

Answer 2

在您的组件中：

导入AfterViewInit和ElementRef：

import { Component, AfterViewInit, ElementRef } from '@angular/core';

声明jQuery变量：

declare var jQuery:any;

@Component({
  ...
})

确保您的组件类实现AfterViewInit并将ElementRef注入构造函数中：

export class AppComponent implements AfterViewInit {
  public constructor(private elementRef: ElementRef) { }

...}

现在您可以使用nativeElement在ngAfterViewInit中访问DOM（在这种情况下，它将找到所有具有属性 data-toggle = tooltip 的元素并初始化工具提示）：

ngAfterViewInit(){
    jQuery(this.elementRef.nativeElement).find('[data-toggle="tooltip"]').tooltip();
}

Answer 3

请将title="Tooltip on top"设置为[title]="'Tooltip on top'"。要么使用ngx-bootstrap

如何使Bootstrap组件与Angular 6一起使用？

3 个答案: