0

次のテンプレートを使用したレイアウト コンポーネントがあります。

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

router-outlet: app-sidebar での選択に応じて、さまざまな画面が表示されます。しかし、セクションで画面が完全にレンダリングされる前に、ロード画面を表示したいと思います。

私は 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() {}
}

サイドバーからホームと呼ばれる1つのコンポーネントがあります。

私を助けてください

4

2 に答える 2

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 に答える