角2子路由

Question

我試圖找出爲什麼沒有被發現我的孩子航線：

所以我有一個路由器，它看起來是這樣的：

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); 

在我about-section.component.html，我有以下加價：

<!-- 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 --> 

我希望能夠加載AboutTestComponent在about-section.component.html路由器出口，因爲我希望重用HTML佈局。現在，當我着陸到「大約」路線時，我得到了期望的AboutComponent，但是當我點擊試圖導航到「測試」路線的按鈕時，我得到了404。是否有辦法使「測試」使用我現在正在做的方式訪問的路線？如果不是，那麼解決這個問題的好方法是什麼？

Answer 1

我覺得如果你導航到about/test以下的按鈕，這是唯一可能的：

<button routerLink="test"></button 

我的test之前刪除的/所以它是一個相對路徑。

如果您現在點擊該按鈕，它將導航到about/test，路由器將AboutTestComponent加載到父節點的<router-outlet>中。

您也可以使用絕對路徑解決這個問題：

<button routerLink="/about/test"></button>