2016-10-14 9 views
0

ルーティング2子:私は、私のabout-section.component.htmlアンギュラ私の子ルートが発見されていない理由を私は把握しようとしています

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AboutComponent } from './about.component'; 
import { AboutTestComponent } from './about-test.component'; 
import { AboutSectionComponent } from './about-section.component'; 

const aboutRoutes: Routes = [ 
    { 
    path: 'about', 
    component: AboutSectionComponent, 
    children: [ 
     { 
     path: '', 
     component: AboutComponent 
     }, 
     { 
     path: 'test', 
     component: AboutTestComponent 
     } 
    ] 
    } 
]; 

export const aboutRouting: ModuleWithProviders = RouterModule.forChild(aboutRoutes); 

は、だから私はこのようになりますルータを持っています次のマークアップ:

<!-- some layout stuff here --> 
<router-outlet></router-outlet> 
<!-- more layout stuff --> 
<button routerLink="/test"></button> <!-- I want to load the AboutTestComponent in the router outlet tags when I click on it --> 

私は、HTMLのレイアウトを再利用したいので、about-section.component.htmlのルータ・アウトレットでAboutTestComponentを読み込むことができるようにしたいです。今すぐ "about"ルートに着陸すると、私は期待されるAboutComponentを取得しますが、 "test"ルートにナビゲートしようとしているボタンをクリックすると404が発生します。 "test"私は今それをやっている方法を使用してアクセス可能なルート?もしそうでなければ、この問題に近づく良い方法は何でしょうか?

答えて

1

私はあなたが以下のボタンでabout/testに移動した場合、これが唯一の可能性であると思う:

<button routerLink="test"></button 

私はそれは相対的なルートであるtest/を削除しました。

ボタンをクリックすると、about/testに移動し、ルータはaboutTestComponentを親の<router-outlet>にロードします。

あなたはまた、絶対的なルートでそれを解決することができます:

<button routerLink="/about/test"></button> 
関連する問題