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

我正在使用带有Angular 4的Bootstrap 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;
  }
}

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

1 个答案: