如何路由到子鏈接？

Question

我有我的路由設置如下圖所示

app.routing.ts

import { Routes, RouterModule } from "@angular/router"; 
import { Test1Component } from "./pages/test1/test1.component"; 
import { Test2Component } from "./pages/test2/test2.component"; 
import { AuthService } from './shared/auth.service'; 
import { LoginComponent } from './login/login.component'; 
import { HomeComponent } from './home/home.component'; 

const APP_ROUTES: Routes = [ 
{ 
    path: "login", 
    component: LoginComponent 
},{ 
    path: "home", 
    component: HomeComponent, 
    children: [{ 
     path: "test1", 
     component: Test1Component, 
     outlet: "contentarea" 
    },{ 
     path: "test2", 
     component: Test2Component, 
     outlet: "contentarea" 
    }] 
}]; 

export const routing = RouterModule.forRoot(APP_ROUTES); 

app.component.html

<router-outlet></router-outlet> 

home.component.html

<div class="row"> 
    <div class="col-xs-12"> 
     <h1>Home</h1> 
     <a [routerLink]="['/home/test1']">Go to Test 1</a> <!-- Not working --> 
     <router-outlet name="contentarea"></router-outlet> 
    </div> 
</div> 

我能夠路由到http://localhost:4200/home和http://localhost:4200/login，但是當我嘗試導航到http://localhost:4200/test1時失敗。

如何修復鏈接，以便當我去http://localhost:4200/home/test1它加載test1在contentarea？

Answer 1

只是刪除outlet: "..."和name="..."

const APP_ROUTES: Routes = [ 
{ 
    path: "login", 
    component: LoginComponent 
},{ 
    path: "home", 
    component: HomeComponent, 
    children: [{ 
     path: "test1", 
     component: Test1Component, 
    },{ 
     path: "test2", 
     component: Test2Component, 
    }] 
}]; 

<div class="row"> 
    <div class="col-xs-12"> 
     <h1>Home</h1> 
     <a [routerLink]="['/home/test1']">Go to Test 1</a> <!-- Not working --> 
     <router-outlet></router-outlet> 
    </div> 
</div> 

總是有有整整一個不願透露姓名的路由器出口。命名的網點只能在未命名的網點之外，並命名爲輔助路線或輔助路線。