爲ng-bootstrap設置工具提示的全局配置

Question

我試圖使用ng-bootstrap爲工具提示設置全局配置。默認情況下，我希望容器是「正文」。我需要看到它的NG-引導頁面上的代碼：

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

我使用引導4角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; 
    } 
}