如何在星云中没有全局微调器的情况下导航？

Question

我正在研究星云 ngrx-admin 模板。有一个全局微调器。从 header 导航到新页面（组件）时正在加载。我只想为特定组件隐藏微调器（在导航或加载新页面时不需要）。

我的 header 有一个 link 如下所示

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

index.html

中的微调器

<div id="nb-global-spinner" class="spinner">
    <div class="blob blob-0"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
  </div>

我试过以下方法，

方法：custom.component.ts

中的 1

ngOnInit(): void {
    const el = document.getElementById('nb-global-spinner');
    if (el) {
      el.style['display'] = 'none';
    }
  }

方法：custom.component.scss

中的2

.spinner{
  display: none;
}

Answer 1

如果 .spinner 是 nb-global-spinner 组件的 class 的名称，那么在您的 css 中尝试：

.spinner ::ng-deep {
   display: none;
}

或者以防万一：

.spinner ::ng-deep {
   * {
      display: none;
   }
}

Answer 2

微调器仅在单击下方时显示

<nb-action class="control-item "><a class="nav-links" href="home">Home</a></nb-action>

我已经通过将其更改为

来修复它

<nb-action class="control-item "><a class="nav-links" [routerLink]="['/home']">Home</a></nb-action>

Href 是 Html 提供的基本属性，用于浏览页面，在点击时重新加载页面。

routerLink 是 angular 提供的属性，用于在不重新加载页面的情况下导航到不同的组件。

如何在星云中没有全局微调器的情况下导航？

How to navigate without global spinner in nebular?

angular

ngx-admin

nebular