角儿童路线根本无法通行

时间:2019-05-18 16:12:49

标签: angular typescript

我刚刚开始使用最新版本的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>

1 个答案:

答案 0 :(得分:1)

应该是这样。

<button type="button" class="btn btn-secondary btn-sm my-2" routerLink="/builder/pages">Next - Pages</button>