Question

有些组件正在加载<router-outlet></router-outlet>，所以我想在RouterOutlet中显示加载器并在隐藏加载器并显示组件之后等待组件完全加载。

我怎样才能做到这一点？他们的任何内置功能是否在RouterOutLet中添加了对加载器的支持

Answer 1

您可以扩展到当前的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) {

    }

}

Answer 2

我很确定没有内置功能。我会使用一些全局服务来管理加载器（显示/隐藏）在固定位置（覆盖或类似）。

将constructor(private router:Router)注入此服务并订阅该服务以获得有关路由更改的通知router.subscribe(...)。当路线改变时显示装载机。

将服务注入到路由器添加的组件中，并在组件初始化（ngOnInit()或ngAfterViewInit()时）通知服务以隐藏加载程序。

Angular2在路由器插座中显示加载器，同时加载特定的路由组件

2 个答案: