Question

我尝试在我的项目中使用最新的Angular 2路由但似乎无法正常工作（它总是在path: '', redirectTo: 'dashboard', pathMatch: 'full'上），我不明白为什么。也许有人对它更有经验？

这是我的routing.module.ts：

    export const appRoutes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
  children: [
    {
      path: ':status',
      component: StatusComponent
    },
    {
      path: ':history',
      component: HistoryComponent
    },
    {
      path: ':documentation',
      component: DocumentationComponent
    }]
},
  {
    path: '**',
    component: PageNotFoundComponent
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }
];
export const routing = RouterModule.forRoot(appRoutes);

还包括所有组件的导入和import {Routes, RouterModule} from '@angular/router';

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {routing} from './routing.module';

@NgModule({
  declarations: [
    ...,],
        imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
      ],
      directives: ROUTER_DIRECTIVES,
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

最后是html - app.component.html

    <div class="row">
  <div class="col-xs-3">
    <app-sidebar></app-sidebar>
  </div>
  <div class="col-xs-9">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
  </div>
</div>

侧栏中的一个示例链接

    <a [routerLink]="['dashboard/status']">Link</a>

显示侧栏和导航栏。链接似乎也是正确的（悬停显示localhost：4200 / dashboard / ...）但点击只会重定向到仪表板。

Answer 1

plnkr

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    children: [
    {
      path: '',
      component: DashboardComponent
    },
    {
      path: 'status',
      component: StatusComponent
    }]
  }
];

Answer 2

在ng-module中导入组件＆gt;

a = [7,8,1,2,4,3,6,5,9]

在ng-module中也添加此代码＆gt;

import { RouterModule, Routes } from '@angular/router';
在模板中添加此app.component：RouterModule.forRoot([ { path: 'othersales', component: OthersalesComponent }, { path: 'prebooking', component: PrebookingComponent }, ])

Angular 2最终路由

2 个答案: