当我们使用进度微调器引导应用程序时，ngx-charts 工具提示未正确显示

Question

我正在尝试使用 ngx-charts 库来显示图表，但所有 ngx 图表的工具提示均未正确显示。 因为我的应用程序有 material spinner 加载器，它是在应用程序中引导的。 我认为这个问题的根本原因可能是 ngx-charts 的 ngx-tooltip-content 组件被附加到 mat-spinner 元素而不是根级 DOM，因此工具提示的位置被放错位置或无法正确显示。

您可以看到 ngx-tooltip 内容是 mat-spinner 的一部分。

<div id="app-loader" class="show hide">
   hello
   <mat-spinner class="mat-spinner mat-progress-spinner mat-primary mat-progress-spinner-indeterminate-animation" mode="indeterminate" role="progressbar" ng-version="8.2.14" style="width: 100px; height: 100px;">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" ng-reflect-ng-switch="true" viewBox="0 0 100 100" style="width: 100px; height: 100px;">
         <!--bindings={
            "ng-reflect-ng-switch-case": "true"
            }-->
         <circle cx="50%" cy="50%" r="45" style="animation-name: mat-progress-spinner-stroke-rotate-100; stroke-dasharray: 282.743px; stroke-width: 10%;"></circle>
         <!--bindings={
            "ng-reflect-ng-switch-case": "false"
            }-->
      </svg>
      <ngx-tooltip-content class="ngx-charts-tooltip-content position-top type-tooltip animate" style="top: 0px; left: 135.5px;">
         <div>
            <span class="tooltip-caret position-top" style="top: 0px; left: 0px;"></span>
            <div class="tooltip-content">
               <!--bindings={
                  "ng-reflect-ng-if": "false"
                  }--><!--bindings={
                  "ng-reflect-ng-if": "\n        <span class=\"tooltip-"
                  }--><span class="ng-star-inserted">
               <span class="tooltip-label">China</span>
               <span class="tooltip-val">2,243,772</span>
               </span>
            </div>
         </div>
      </ngx-tooltip-content>
   </mat-spinner>
</div>

当我从角度应用程序中删除旋转加载程序时，ngx-charts 上的工具提示工作正常。

请找到下面的 stackblitz 项目，我在其中重现了问题： https://stackblitz.com/edit/angular-simple-ngx-charts-3chqrj

请帮我解决这个问题？

Answer 1

正如您所确定的，材质旋转器导致了该问题。

根据 Angular 文档，

bootstrap

中的

app.module.ts

数组用于：

Angular 创建并插入到 index.html 主机网页中的根组件。

但是，你已经通过了：

bootstrap: [MatSpinner, AppComponent]

无论如何，这样做实际上不会显示旋转器。我的理解是，您希望在应用程序引导之前和期间显示加载旋转器。为此，您可以使用非角度加载微调器，例如基于 CSS。人们通常可能会使用旋转 Font Awesome 图标之类的东西，它不依赖于 Angular 的引导，例如 https://codepen.io/kruxor/pen/jOxVeM

因此，您想要从

MatSpinner

和

index.html

中的

bootstrap

数组中删除

app.module.ts

，然后添加一个基于 CSS 的加载微调器（例如 Font Awesome 的

circle-notch

图标和

spin

类） ，使其旋转）。