Angular | Router link with names outlet

时间:2018-03-25 20:03:14

标签: angular routing

I am trying to make a router link which is used for a multi step form wizard. I have an outlet of wizard of all of the links inside of my routes.module.ts.

I have then got a nav.component.html where I am trying to get the steps for the wizard however I am constantly getting an error of

Cannot match any routes. URL Segment: 'wizard/database-configuration'

This is my routes.module.ts file:

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

import {StepsSiteComponent} from './components/setup-wizard/steps/site/site.component';
import {StepsUserComponent} from './components/setup-wizard/steps/user/user.component';
import {StepsDatabaseComponent} from './components/setup-wizard/steps/database/database.component';

import {StepGuardService} from './services/step-guard.service';

export const appRoutes: Routes = [
  {
    path: 'wizard/site-settings',
    component: StepsSiteComponent,
    outlet: 'wizard'
  },
  {
    path: 'wizard/database-configuration',
    component: StepsDatabaseComponent,
    canActivate: [StepGuardService],
    outlet: 'wizard',
  },
  {
    path: 'wizard/admin-user-settings',
    component: StepsUserComponent,
    canActivate: [StepGuardService],
    outlet: 'wizard'
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'wizard/site-settings',
  }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {useHash: true})],
  exports: [RouterModule],
  providers: [StepGuardService]
})

export class RoutesModule {}

I am then registering this inside of my app.module.ts file.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RoutesModule
],

I also have this inside of my nav.component.html.

  <ul>
    <li>
      <a [routerLink]="['/wizard/database-configuration', {outlets: { 'wizard': ['/wizard/database-configuration']}}]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-toggle="tab" title="Database Configuration">
        Database Configuration
      </a>
    </li>
  </ul>

0 个答案:

没有答案