如何在 Angular 2 rc4 中扩展 routerOutlet答案

【问题标题】：How do I extend routerOutlet in angular 2 rc4如何在 Angular 2 rc4 中扩展 routerOutlet
【发布时间】：2016-07-11 12:27:31
【问题描述】：

import { ViewContainerRef, ComponentFactoryResolver, Directive, ResolvedReflectiveProvider} from '@angular/core';
import { Router, RouterOutlet, ActivatedRoute, RouterOutletMap } from '@angular/router';

@Directive({
    selector: 'router-outlet'
})
export class ApplicationRouter extends RouterOutlet {
    publicRoutes: Array;
    private parentRouter: Router;
    private router: Router;

    constructor(parentOutletMap: RouterOutletMap, location:ViewContainerRef, componentFactoryResolver: ComponentFactoryResolver, name: string) {
        super(parentOutletMap, location, componentFactoryResolver, name);
        this.router = _parentRouter;
    }

    activate(activatedRoute: ActivatedRoute, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap) {
        debugger;
       // return super.activate(instruction);
    }

}

我不知道要实例化的超类的类型，目的是将授权转移到路由器级别。

【问题讨论】：

有这方面的文档吗？

标签： angular angular2-routing

【解决方案1】：

您是否出于特殊原因对扩展 RouterOutlet 感兴趣，或者只是为您的路由添加一个身份验证层？对于后者，只需将您的身份验证类从“扩展 RouterOutlet”更改为“实现 CanActivate”。

“AuthenticationGuard”实现示例：

import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    if (this.authService.isLoggedIn) { return true; }
    this.router.navigate(['/login']);
    return false;
  }
}

然后在您的路由文件中将“CanActivate”属性添加到您想要访问控制层的路由：

//route file
...
{
  path: 'admin',
  component: CrisisAdminComponent,
  canActivate: [AuthGuard]
},
...

就这么简单。

来自angular docs router guards session

【讨论】：

【解决方案2】：

Angular 升级到 RC4 后我遇到了同样的问题。其中一个应用程序组件正在扩展RouterOutlet

RouterOutlet随着时间的推移发生了很大变化，为了让您的 ApplicationRouter 类正常工作，您需要通过实现CanActivate 接口来使用路由器保护。

请查看我的回答 here 并阅读更多关于路由器保护的信息，请参阅 this。

我希望这会有所帮助！

【讨论】：