Angular 嵌套路由器出口中子路由的角度4路由问题

我的代码如下：

应用程序组件html

下面是我的main.component.html

我得到下面的错误

错误：无法匹配任何路由。URL段：“某种形式”

我的路由器链接在哪里

[routerLink]=“[navObj.url]”

其中url包含

“someform”

或

“/somelist”

空白路径组件加载正确，但路径我面临问题

路由器插座

是否位于Angular 4中支持的另一个组件路由器插座内

---

执行上述操作的正确方法是什么？稍后我将添加

authGuard

。

我认为您应该这样做：

//routing.module.ts 
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginPage, pathMatch: 'full' },
];

//main.module.ts
const childRoutes: Routes = [
    { 
        path: 'dashboard', component: MainComponent , 
        children : [
                        { path: 'newform', component: NewForm, outlet: 'form' },
                        { path: 'testlist', component: TestList, outlet: 'list' }
                    ]
    }
];

---

尝试在模块的单独文件中安排路由。请参阅下面我的一个项目目录结构

我的示例代码是

app.routing.ts auth.routing.ts auth.module.ts（您可以看到导入的AuthRoutes和在导入中添加的AuthRoutes:[]）

---

您可以使用抽象基类在另一个路由器出口场景中实现路由器出口。在抽象类中提供一个路由器出口，并使您的主要组件扩展抽象类。已修改的

routerLink

到

[{outlets:{list:['somelist']}}]

但是现在它无法找到

仪表板

路由您是否添加了多个带有名称的

路由器出口

？哪些嵌套在主路由器出口内？将仪表板移动到main.module解决了延迟加载问题。。但命名为

的路由器出口

问题仍然存在。我已经用我的新问题修改了任务。@AnupB，请不要更改您的原始问题，如果您在解决当前问题后遇到新问题，请发布新问题，这对我们的答案没有任何价值，因此请还原该问题并提出另一个问题。

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginPage, pathMatch: 'full' },
    { path: 'dashboard', loadChildren : './main.module#MainModule' } // lazy load post login success
];

export const appRouter: ModuleWithProviders = RouterModule.forRoot(routes, { enableTracing: true });

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2">
            <router-outlet name="nav"></router-outlet>
        </nav>
        <section class="col-md-4">
            <router-outlet name="list"></router-outlet>
        </section>
        <section class="col-md-6">
            <router-outlet name="form"></router-outlet>
        </section>
    </div>
</div>

const childRoutes: Routes = [
  { path: '', component: SideNav, outlet: 'nav' }, // working
  { path: '', component: BlankComponent, outlet: 'form' },// working
  { path: '', component: BlankComponent, outlet: 'list' },// working
  { path: 'someform', component: SomeForm, outlet: 'form' },// issue
  { path: 'somelist', component: SomeList,  outlet: 'list' },// issue
  { path: '**', component: PageNotFound, outlet: 'list' },
];

const mainRoutes: Routes = [
  { path: '', component: MainComponent, children: childRoutes }// works
];
export const mainRouter : ModuleWithProviders = RouterModule.forChild(mainRoutes);

//routing.module.ts 
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginPage, pathMatch: 'full' },
];

//main.module.ts
const childRoutes: Routes = [
    { 
        path: 'dashboard', component: MainComponent , 
        children : [
                        { path: 'newform', component: NewForm, outlet: 'form' },
                        { path: 'testlist', component: TestList, outlet: 'list' }
                    ]
    }
];

import { Routes, RouterModule } from '@angular/router';

// import { HomeComponent } from './home/index';
// import { LoginComponent } from './login/index';
// import { LogoutComponent } from './logout/logout.component';
// import { RegisterComponent } from './register/index';

import { AuthGuard, GuestGuard} from './shared/_guards';

import { DashboardComponent } from './dashboard/dashboard.component';
import { AppLayoutComponent } from './_layout/app-layout/app-layout.component';
import { ClientListComponent } from './clients/client-list/client-list.component';

// App routes
const appLayoutRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'clients', component: ClientListComponent },
];

const appRoutes: Routes = [
    { 
        path: '', 
        canActivate: [AuthGuard],
        component: AppLayoutComponent, 
        data: { title: 'App Views' }, 
        children: appLayoutRoutes
    },
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, GuestGuard } from './../shared/_guards';

import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { RegisterComponent } from './register/register.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';


const routes: Routes = [
  { path: 'login', component: LoginComponent ,canActivate : [GuestGuard] },
  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] },
  { path: 'register', component: RegisterComponent, canActivate : [GuestGuard] },
  { path: 'reset/password', component: ResetPasswordComponent, canActivate : [GuestGuard] },
];

export const AuthRoutes = RouterModule.forRoot(routes);

import { SharedModule } from './../_shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { RegisterComponent } from './register/register.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
import { AuthService } from './auth.service';


import { AuthRoutes } from './auth.routing';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SharedModule,
    AuthRoutes
  ],
  declarations: [
    LoginComponent,
    LogoutComponent,
    RegisterComponent,
    ResetPasswordComponent
  ],
  providers: [
    AuthService
  ]
})
export class AuthModule { }