Question

我对Angular很新，我需要有关路由的帮助。我有这个设置。

app.component.html

<router-outlet name="nav"></router-outlet>
<router-outlet name="left-sidebar"></router-outlet>
<ui-workspace [push-workspace]="pushWorkspace$ | async">
    <router-outlet name=content></router-outlet>
</ui-workspace>
<router-outlet></router-outlet>

app.module.ts

import { NgModule } from '@angular/core';

import { HomeComponent } from './home/home.component';
import { HomeRoutingModule } from './home-routing.module';
import { EffectsModule } from '@ngrx/effects';
import { effects } from './store';
import { CommonModule } from '@angular/common';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule,
    EffectsModule.forFeature(effects),
    P365ControlsModule.forChild(),
    HomeRoutingModule
  ]
})
export class HomeModule {
}

应用-routing.module.ts

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

import { LoadingComponent } from './components/loading/loading.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';

const routes: Routes = [
  {
    path: 'loading',
    component: LoadingComponent
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent
  },
  {
    path: '',
    redirectTo: '/welcome', pathMatch: 'full'
  },
  {
    path: '**',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

电子表单-list.component.html

<p>
  e-forms-list works!
</p>
<ui-button [routerLink]="['add','education']">Klikni za add e prijave...</ui-button>
<router-outlet></router-outlet>

电子forms.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { EFormsRoutingModule } from './e-forms-routing.module';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';
import { P365ControlsModule } from 'p365-controls';

@NgModule({
  imports: [
    CommonModule,
    EFormsRoutingModule,
    P365ControlsModule.forChild()
  ],
  declarations: [EFormsListComponent, EFormsEducationEditComponent]
})
export class EFormsModule { }

电子表单-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, AuthzGuard } from '../services/guards';
import { ApplicationRole } from '../models';
import { EFormsListComponent } from './e-forms-list/e-forms-list.component';
import { NavComponent } from '../components/nav/nav.component';
import { LeftSidebarComponent } from '../components/left-sidebar/left-sidebar.component';
import { EFormsEducationEditComponent } from './e-forms-education-edit/e-forms-education-edit.component';

const routes: Routes = [
  {
    path: 'eForms',
    //canActivate: [AuthGuard, AuthzGuard],
    data: {
      roles: [ApplicationRole.EducationAdmin, ApplicationRole.Learner]
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: EFormsListComponent,
        outlet: 'content',
        children: [
          {
            path: 'add/education',
            component: EFormsEducationEditComponent
          }
        ]
      },
      {
        path: '',
        component: NavComponent,
        outlet: 'nav'
      },
      {
        path: '',
        component: LeftSidebarComponent,
        outlet: 'left-sidebar'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EFormsRoutingModule { }

电子表单教育-edit.component.html

<p>
  e-forms-education-edit works!
</p>

我想要得到的是：网址：http://localhost:4200/eForms - ＆gt;渲染eForms路由和使用路径＆＃39;定义的第一个子节点。这没问题。 http://prntscr.com/it7gth

url：http://localhost:4200/eForms/add/education - ＆gt;渲染eForms路线然后渲染第一个孩子，然后渲染它首先被定义为路径＆＃39; add / education＆＃39;。但是当我尝试这个时，我找不到组件。 http://prntscr.com/it7i3o

有人可以解释一下我做错了什么。目前我没有使用延迟加载模块或类似的东西，但我计划将来这样做。

Answer 1

实际发生的是 EFormsListComponent 不会加载，因为它已经路径匹配：完整映射到 eForm / 。您正在使用PathMatch：Full，然后路径如＆＃34; eForms / asd＆＃34;，＆＃34; eForms / s＆＃34; 将被视为不同。所以它不会加载需求组件。要加载 EFormsListComponent ，请使用 pathMatch：＆＃34;前缀＆＃34; 。这将匹配每个网址。有关详细信息：look at the angular doc T

Answer 2

我想我明白了。问题在于命名路由器插座。我从 app.component.html 中删除了名为“content”的路由器插座。我还从 e-forms-routing.module.ts 中的路径中删除了 outlet 。现在它正在运作。

据我所知，命名路由器插座用于显示弹出窗口等应用程序的一小部分。资料来源：https://angular.io/guide/router#add-a-secondary-route

感谢大家的帮助。

Angular 5路由子路由

2 个答案: