Question

我正在尝试向ngbTooltip添加自定义类，该类在ng-bootstrap官方文档中运行良好 ngBootstrap Link

我正在尝试在我的代码中复制相同的内容：

tooltip-test.component.html

<div class="row mt-5 ml-5">
  <div class="col">
    <button type="button" class="btn btn-primary" ngbTooltip="Tool tip on top" placement="top"
      tooltipClass="my-custom-class">Tooltip</button>
  </div>
</div>

tooltip-test.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-tooltip-test',
  templateUrl: './tooltip-test.component.html',
  styleUrls: ['./tooltip-test.component.css'],
  providers: [NgbTooltipConfig],
  // encapsulation: ViewEncapsulation.None
})
export class TooltipTestComponent implements OnInit {

  constructor(tooltipConfig: NgbTooltipConfig) {
    tooltipConfig.openDelay = 500;
    tooltipConfig.tooltipClass = 'my-custom-class'
   }

  ngOnInit() {
  }

}

tooltip-test.component.css

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}

但是我想在不使用代码中使用encapsulation: ViewEncapsulation.None或::ng-deep或:host的情况下实现相同的目的。 tooltipConfig.openDelay = 500;工作正常，但 tooltipConfig.tooltipClass = 'my-custom-class'未载入课程。我什至尝试了HTML中的tooltipClass="my-custom-class"。谁能告诉我我要去哪里错了？

Stackblitz Link where code is not working

Answer 1

所有您需要了解的是Angular中的视图封装。这是一篇好文章：https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

ngbTooltipConfig tooltipClass不加载自定义样式的工具提示

1 个答案: