我刚刚开始使用最新版本的angular,并尝试使用这些路线。我在让孩子们路由正常工作时遇到一些问题。基本上,我的主要应用程序组件带有,然后是一个构建器组件,而我想要使用不同的组件进行更新。现在,我有了初始的空白路由,它可以加载子组件并且可以正常工作。但是,如果我尝试使用“页面”的子路由,则找不到该路由。我可能正在尝试完全解决这个问题,但是正在寻找一些好的帮助!
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SitesViewComponent } from './sites-view/sites-view.component';
import { BuilderComponent } from './builder/builder.component';
import { ProgramNameComponent } from './program-name/program-name.component';
import { PagesComponent } from './pages/pages.component';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'sites', component: SitesViewComponent },
{ path: 'builder', component: BuilderComponent,
children: [
{ path: '', component: ProgramNameComponent, outlet:"buildOutlet" },
{ path: 'pages', component: PagesComponent, outlet:"buildOutlet" }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
builder.component.html
<h5>Builder</h5>
<router-outlet name="buildOutlet"></router-outlet>
<button type="button" class="btn btn-secondary btn-sm my-2" routerLink="pages">Next - Pages</button>
答案 0 :(得分:1)
应该是这样。
<button type="button" class="btn btn-secondary btn-sm my-2" routerLink="/builder/pages">Next - Pages</button>