角2：ブートストラップされたものとは別のコンポーネントでルータを定義する

Question

私はまだAngular2を使っているプロジェクトで作業しています。 私が何を説明する必要があるのか​​の詳細については、issueを参照してください。

AppComponentは、bootstrapでブートストラップされています。これは非常に単純なコンポーネントは次のとおり

@Component({ 
    selector: 'app-view', 
    directives: [ Devtools, MainComponent ], 
    template: ` 
     <ngrx-devtools></ngrx-devtools> 
     <main-cmp></main-cmp> 
    ` 
}) 
export class AppComponent { } 

このコンポーネントは、別の一つを含む：MainComponent（main-cmpセレクタを介して）を。何らかの理由で、MainComponentにルーティングを設定したいと考えています。ここで

はコードです：

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES, NavComponent ], 
    template: ` 
     <h1>App</h1> 
     <nav-cmp></nav-cmp> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
    { path: '/medias', name: 'Medias', component: MediasComponent } 
]) 
export class MainComponent { 
    constructor (private router:Router, private store:Store<AppStore>) { 
     router.subscribe(url => store.dispatch(changeUrl(url))); 
    } 
} 

最後に、MainComponentは非常に基本的なナビゲーションであるNavComponentが含まれています。

この設定では、この問題が発生します。 EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15]。

もちろん、ルータのロジックをAppComponentに移動すると、すべて正常に動作します。

私の質問です：ブートストラップされているもの以外のコンポーネントにルーティングする方法はありますか？

ありがとうございました。

Answer 1

RouteRegistryクラスのgenerateメソッドは、明らかにルートコンポーネントに依存しているため（ハードコードされているため）、不可能です。ソースコード内の行を参照してください。

RouteRegistry.prototype._generate = function(linkParams, 
     ancestorInstructions, prevInstruction, _aux, _originalLink) { 
    (...) 
    var parentComponentType = this._rootComponent; // <---- 
    (...) 

    var rules = this._rules.get(parentComponentType); 
    if (lang_1.isBlank(rules)) { // <---- 
    throw new exceptions_1.BaseException("Component \"" + 
     lang_1.getTypeNameForDebugging(parentComponentType) + 
     "\" has no route config."); 
    } 

    (...) 
}; 

この方法は、間接的にRouterLinkディレクティブの_updateLinkメソッドから使​​用されている：

ここ
• https://github.com/angular/angular/blob/master/modules/angular2/src/router/route_registry.ts#L345

がエラーをtrhowsコードです。ここで

は、対応するスタックトレースです：https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview：

RouteRegistry._generate (router.js:2702) 
RouteRegistry.generate (router.js:2669) 
Router.generate (router.js:3174) 
RouterLink._updateLink (router.js:1205) 

は、私はあなたの問題をデバッグするために使用plunkrを参照してください。

Answer 2

回避策はありますか？ルートを子ルートとして使用しますか？

@Component({ 
    selector: 'app', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
    <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    {path: '/...', as: 'Main', component: MainComponent, useAsDefault: true } 
]) 
export class App { } 

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
     <h1>App</h1> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
]) 
export class MainComponent { }