如何路由到子链接？

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.

时它失败了

如何修复 link 以便当我转到 http://localhost:4200/home/test1 时它会在 contentarea 中加载 test1？

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>

总是必须有一个未命名的路由器插座。具名插座只能是无名插座的补充，并被命名为辅助路线或辅助路线。

如何路由到子链接？

How to route to child links?

angular2-routing

angular