2016-06-16 13 views
1

私は角型アプリケーションでログインシステムを実装しています。私はそのために良いリソースhereを見つけました。しかし、そこに追従しているカスタムRouterOutletディレクティブ、エラーです:角度2ログイン指令とlocation.createComponent

import { ElementRef, DynamicComponentLoader, AttributeMetadata, Directive, Attribute } from '@angular/core'; 
import { Router, RouterOutlet, ComponentInstruction } from '@angular/router-deprecated'; 

import { UserService } from './user.service'; 

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

export class LoggedInRouterOutlet extends RouterOutlet 
{ 
    publicRoutes: Array; 
    private parentRouter: Router; 
    private userService: UserService; 

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

     this.parentRouter = _parentRouter; 
     this.userService = userService; 
     this.publicRoutes = [ 
      '', 
      'login' 
     ]; 
    } 

    activate(instruction: ComponentInstruction) { 

     if (this._canActivate(instruction.urlPath)) { 
      return super.activate(instruction); 
     } 

     this.parentRouter.navigate(['Login']); 
    } 

    _canActivate(url) { 
     return this.publicRoutes.indexOf(url) !== -1 || this.userService.isLoggedIn() 
    } 
} 

は、エラーは次のとおりです。TypeError: location.createComponent is not a function

私はそれについての事を読み、問題が_elementRefがElementRefオブジェクトであることもあり、スーパーメソッドはViewContainerRefオブジェクトを必要とします。しかし、私はちょうど角度を学ぶようになり始めています、そして、私はこれを修正する方法を知らない。横に、Angular2はまだ積極的に開発されている、物事は、まあ、私は解決策を見つける作った私の仮説を書い

答えて

1

2.0.0-rc.1である)チュートリアルのバージョン間で変更し、鉱山たことがあります。それはViewContainerRefをインポートする代わりにElementRefと取得と同じくらい簡単ですコンストラクタでそのインスタンス:もちろん

constructor(
    _viewContainerRef: ViewContainerRef, 
    _loader: DynamicComponentLoader, 
    _parentRouter: Router, 
    @Attribute('name') nameAttr: string, 
    userService: UserService 
) { 
    super(_viewContainerRef, _loader, _parentRouter, nameAttr); 

    this.parentRouter = _parentRouter; 
    this.userService = userService; 
    this.publicRoutes = [ 
     '', 
     'login' 
    ]; 
} 

私は私がやっている見当がつかないが、それが動作している場合...自分の作品を知っているし、これに詳細を追加したい人は歓迎されています。

+1

あなたは正しいことをしました。もしそれが 'ViewContainerRef'を必要とするなら、それを渡すだけです。私は説明のために変数の名前を変更したいと思います! – rinukkusu

+0

あなたは正しいです。私は答えを編集する。 –