2017-07-27 9 views
0

子にルーティングを書き込もうとしています。ブラウザのURLバーに正しく挿入されていないという問題があります。コードの下に。角4の子ルーティング

router.module

const routes: Routes = [ 

    {path: 'menu', component: MenuComponent, canActivate: [AuthGuard], 
    children: [ 
     { path: 'upload', component: DrawingUploadComponent }, 
     { path: 'account', component: AccountComponent }, 
     { path: 'projects', component: ProjectListComponent } 
    ]} 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 

export class MenuRoutingModule {} 

menu.component

<nav> 
    <a routerLink="/projects" routerLinkActive="active">Projects</a> 
    <a routerLink="/upload" routerLinkActive="active">Upload</a> 
    <a routerLink="/account" routerLinkActive="active">Account</a> 
</nav> 
MENU COMPONENT 
<router-outlet></router-outlet> 

親コンポーネント:

const routes: Routes = [ 
    {path: 'login', component: LoginComponent}, 
    {path: 'register', component: RegistrationComponent}, 
    {path: "", redirectTo: "login", pathMatch: "full"}, 
    {path: 'menu', component: MenuComponent, canActivate: [AuthGuard]} 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule { 
} 

イム"/menu"下のメニューコンポーネントが表示されているときに問題が今、ありますどんなリンクをクリックしてもIm

<a routerLink="/upload" routerLinkActive="active">Upload</a> 

im取得コンソールエラー いずれのルートにも一致しません。 URLセグメント: 'アップロード' エラー:いずれの経路にも一致しません。 URLセグメント:

を「アップロード」が、私は、ブラウザのバーに手でルートを入力したいとき「/メニュー/アップロード」私は正しい結果

答えて

0

あなたのルートが参照する、/で始まる取得していますあなたのアプリのルート。それを削除するか、フルパスを使用する必要があります。 routerLink="/menu/upload"

関連する問題