0

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

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

router-outlet：这会根据应用程序侧边栏上的选择显示各种屏幕。但是我想在该部分中完全渲染屏幕之前显示加载屏幕。

我正在使用 ngx-loading 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() {}
}

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

请帮我

4

2 回答 2

0

您可以使用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>
于 2018-07-09T13:25:48.800 回答
0

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

HTML：

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

TS：

public resolved = false;

这样你就可以在路由解析未完成时使用任何你想要的组件

于 2018-07-09T12:33:16.253 回答