如何路由到子链接？

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> 

总是有有整整一个不愿透露姓名的路由器出口。命名的网点只能在未命名的网点之外，并命名为辅助路线或辅助路线。