如何仅向路由器插座显示 ngx 加载动画?

Question

我有一个带有以下模板的布局组件，

<app-header></app-header>
<app-sidebar></app-sidebar>
<section class="main-container">
<router-outlet></router-outlet>
</section>

路由器插座：根据在应用程序侧边栏上进行的选择显示各种屏幕。 但是我想在屏幕在该部分中完全呈现之前显示加载屏幕。

我正在使用 ngx 加载 https://github.com/Zak-C/ngx-loading.

请帮帮我怎么做？ 如何在用户单击侧边栏时从屏幕获得事件发射器。

我的布局组件，

import { Component, OnInit } from '@angular/core';
import { SharedServiceService } from '../../services/sharedService';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {
loading = false;
constructor( private sharedService: SharedServiceService) {}
ngOnInit() {}
}

我有一个组件从侧边栏称为家。

请帮助我

Answer 1

不完全清楚你在问什么，但我认为你可以这样处理：

.HTML：

<ngx-loading [show]="!resolved"></ngx-loading>
<router-outlet (activate)='resolved=true'></router-outlet>

TS ：

public resolved = false;

这样，您可以在路由解析未完成时所需的任何组件

Answer 2

您可以使用Router.events：

import { Router, NavigationStart, NavigationEnd } 
from '@angular/router';
...
constructor(private _router: Router) {
this._router.events.subscribe(evt => {
if(evt instanceof NavigationStart) {
this.loading = true;
} else if (evt instanceof NavigationEnd) {
this.loading = false;
}
});
}
...

然后只需在模板中使用loading变量：

<ngx-loading [show]="loading"></ngx-loading>