Angular2在加載特定路由組件時顯示加載器在router-outlet

Question

一些可能的組件正在花費時間加載到<router-outlet></router-outlet>，所以我想在RouterOutlet中顯示加載器，並在隱藏加載器後等待組件完全加載以及顯示組件。

我該如何做到這一點？他們的任何內置功能都可以在RouterOutLet中添加對加載程序的支持

Answer 1

我很肯定這裏沒有內置功能。我將使用一些全局服務來管理加載器（顯示/隱藏）在固定位置（覆蓋或類似）。

將constructor(private router:Router)注入此服務並訂閱它以獲取有關路線更改的通知router.subscribe(...)。 當路線變化時顯示加載器。

將服務也注入到由路由器添加的組件中，並在組件初始化時通知服務（ngOnInit()或ngAfterViewInit()）以隱藏加載程序。

Answer 2

您可以擴展到當前的angular2 router-outlet指令並創建您自己的自定義插座。

你可以在這裏處理你的裝載器的顯示和隱藏。

CustomRouterOutlet，TS

import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core'; 
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; 

@Directive({ 
    selector: 'router-outlet' 
}) 

export class CustomRouterOutlet extends RouterOutlet { 
    private parentRouter: Router; 

    constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, 
       _parentRouter: Router, @Attribute('name') nameAttr: string) { 
     super(_elementRef, _loader, _parentRouter, nameAttr); 

     this.parentRouter = _parentRouter; 

     this.parentRouter.subscribe(()=> { 
      console.log('changed'); 
     }) 
    } 

    activate(instruction: ComponentInstruction) { 
     console.log('activate'); 

     return super.activate(instruction); 
    } 

    deactivate(instruction: ComponentInstruction) { 
     console.log('deactivate'); 

     return super.deactivate(instruction); 
    } 
} 

你開始你的

Main.ts

import {Component, ElementRef, Input, OnInit, DynamicComponentLoader, Injector, Injectable, provide} from 'angular2/core'; 
import {RouteConfig, RouterLink, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, CanActivate, RouteParams} from 'angular2/router'; 
import {CustomRouterOutlet} from './shared/directive/customOutlet' 

@Component({ 
    selector: 'Main', 
    template: require('./main.html'), 
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, RouterLink, CustomRouterOutlet], 
}) 

export class Main { 

    constructor(private router: Router) { 

    } 

}