twitter-bootstrap - 为 ng-bootstrap 设置工具提示的全局配置

Question

我正在尝试使用 ng-bootstrap 为工具提示设置全局配置。默认情况下，我希望容器是“body”。我在 ng-bootstrap 页面上看到了它所需的代码:

https://ng-bootstrap.github.io/#/components/tooltip

我想我不知道该把它放在哪里。我试过将它放入 app.component.ts 文件中，但它似乎在那里没有做任何事情。

app.component.ts

import { Component } from '@angular/core';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  host: {'class': 'global'},
  providers: [NgbTooltipConfig]
})

export class AppComponent {
  isCollapsed:boolean;

  constructor() {
    this.isCollapsed = true;
  }
}

export class NgbdTooltipConfig {
  constructor(config: NgbTooltipConfig) {
    config.placement = 'right';
    config.container = 'body';
    config.triggers = 'hover';
  }
}

我正在使用 Bootstrap 4 和 Angular 4。

Answer 1

如 docs 中所述:

You can inject this service, typically in your root component, and customize the values of its properties in order to provide default values for all the tooltips used in the application.

你不需要创建一个新的类，你可以在你的主组件中创建:

app.component.ts

import { Component } from '@angular/core';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  host: {'class': 'global'},
  providers: [NgbTooltipConfig]
})

export class AppComponent {
 
  isCollapsed: boolean;

  constructor(config: NgbTooltipConfig) {
    config.placement = 'right';
    config.container = 'body';
    config.triggers = 'hover';
    this.isCollapsed = true;
  }
}