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