我正在学习角度路由。 当我单击
Home/About/Dashboard
链接按钮 (test.component.html) 时,它们会使用 <module> works!
outlet1
正确显示 router-outlet
。但是当我单击 Experiment
链接按钮时,显示不会发生。我做错了什么?
我的 app.components.html 看起来像这样:
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<nav>
</nav>
<router-outlet></router-outlet>
<div >
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</div>
<router-outlet name="outlet1"></router-outlet>
我的应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AuthGuard } from './auth.gard';
import { ListComponent } from './list.component';
import { TestComponent } from './test/test.component';
const myModule = () => import('./my-routing/my-module').then(x => x.MyRoutingModule);
const routes: Routes = [
{ path: '', component: TestComponent },
{ path: 'experiment', loadChildren: myModule },
{
path: 'home',
component: HomeComponent, outlet: "outlet1"
},
{
path: 'about', canActivate: [AuthGuard],
component: AboutComponent, outlet: "outlet1",
},
{
path: 'dashboard',
component: DashboardComponent, outlet: "outlet1"
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我的 my-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from '../list.component';
import { TestComponent } from '../test/test.component';
const routes: Routes = [
{ path: 'experiment', component: ListComponent, outlet: "outlet1" },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule { }
我的 test.component.html 看起来像这样:
<div class="container">
<div class="row">
<div class="col-2">
<a [routerLink]="[{ outlets:{ outlet1: ['home'] }}]" routerLinkActive="active"><button type="button" class="btn btn-primary">
Home</button></a>
</div>
<div class="col-2">
<a [routerLink]="[{ outlets:{ outlet1: ['about'] }}]"><button type="button" class="btn btn-primary">
About</button></a>
</div>
<div class="col-2">
<a [routerLink]="[{ outlets:{ outlet1: ['dashboard'] }}]"><button type="button" class="btn btn-primary">
Dashboard</button></a>
</div>
<div class="col-1">
<a [routerLink]="[{ outlets:{ outlet1: ['experiment'] }}]"><button type="button" class="btn btn-primary">
Experiment</button></a>
</div>
</div>
</div>
您在
my-routing.module.ts
中的配置不正确。您在app-routing.module.ts
中配置了功能模块的路径,例如
{ path: 'experiment', loadChildren: myModule }
然后你在
my-routing.module.ts
中配置一条路径,就像
{ path: 'experiment', component: ListComponent, outlet: "outlet1" }
就像@janci 在评论中已经提到的那样,您的路线目前应该看起来像“实验/实验”以显示
ListComponent
。
为什么?
通过第一个“实验”,Angular 路由器导航到您的功能模块
my-module
。在您的功能模块中没有配置根路径(空路径),仅配置了一个路径“实验”,这是上述路径中的第二个路径。
如果您在
my-routing.module.ts
中配置路线,例如
{ path: '', component: ListComponent, outlet: "outlet1" }
它应该按照您的预期工作。