Angular 角度2显示加载特定路由组件时路由器出口中的加载程序

一些可能的组件在

中得到了加载时间，因此我考虑在RouterOutlet中显示加载程序，并在隐藏加载程序并显示组件之后等待组件完全加载

---

我怎样才能做到这一点？他们是否有任何内置功能来添加对RouterOutLet中loader的支持？我很确定目前还没有内置功能。我会使用一些全局服务，在固定位置（覆盖或类似位置）管理加载程序（显示/隐藏）

将

构造函数（专用路由器：路由器）

注入此服务，并订阅它以获得有关路由更改的通知

路由器。订阅（…）

。 当路线改变时，显示装载机

---

将服务也注入到路由器添加的组件中，并在组件初始化时通知服务（

ngOnInit（）

或

ngAfterViewInit（）

），以隐藏加载程序。

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

将

构造函数（专用路由器：路由器）

注入此服务，并订阅它以获得有关路由更改的通知

路由器。订阅（…）

。 当路线改变时，显示装载机

---

将服务也注入路由器添加的组件，并在组件初始化时通知服务（

ngOnInit（）

或

ngAfterViewInit（）

），以隐藏加载程序。

您可以扩展到当前的angular2路由器出口指令，并创建自己的自定义出口

你可以在这里处理你的装载机的显示和隐藏

定制路由器输出，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);
    }
}

在这里导入您的自定义插座，从这里开始

梅因酒店

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) {

    }

}

---

您可以扩展到当前的angular2路由器出口指令，并创建自己的自定义出口

你可以在这里处理你的装载机的显示和隐藏

定制路由器输出，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);
    }
}

在这里导入您的自定义插座，从这里开始

梅因酒店

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) {

    }

}

---

谢谢你提供的信息。。。实际上，我创建了共享服务，并在deactivate函数中激活了扩展路由器出口中的加载程序，并在组件的AfterViewInit中禁用了加载程序（正如Gunter所建议的那样），感谢您提供的信息。。。实际上，我创建了共享服务，并在deactivate函数中激活了扩展路由器出口中的加载程序，并在组件的AfterViewInit中禁用了加载程序（正如Gunter所建议的那样）