为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中所述：

您可以通常在根组件中注入此服务，并自定义其属性的值，以便为应用程序中使用的所有工具提示提供默认值。

你并不需要创建一个新的类，你可以做内部的主要组件：

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;
  }
}