嵌套路由器插座中的子路由的Angular 4路由问题

Question

我的代码如下：

  

app component html

<app-header ></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

  

而routing.module.ts是

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 });

  

以下是我的main.componnt.html

<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>

  

下面是main.module.ts

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);

我得到以下错误

  

错误：无法匹配任何路由。网址细分：＆＃39; someform＆＃39;

我的路由器链接在哪里 [routerLink]="[navObj.url]"其中网址包含"someform"或"./somelist"

空白路径组件正确加载，但路径我遇到问题。

在Angular 4中支持的另一个组件路由器插座中是router-outlet吗？

上面的实施是正确的？我稍后会添加authGuard。

Answer 1

我认为你应该制作这样的路线：

//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' }
                    ]
    }
];

Answer 2

尝试将您的路线安排在单独的模块文件中。请参阅下面的项目目录结构之一。

我的示例代码是..

app.routing.ts

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);

auth.routing.ts

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);

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

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 { }