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

【问题标题】：Set global config of tooltip for ng-bootstrap为 ng-bootstrap 设置工具提示的全局配置
【发布时间】：2017-11-23 09:02:21
【问题描述】：

我正在尝试使用 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';
  }
}

我正在使用带有 Angular 4 的 Bootstrap 4。

【问题讨论】：

标签： twitter-bootstrap angular ng-bootstrap

【解决方案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;
  }
}

【讨论】：