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>

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

如何路由到子链接？

1 个答案: