如何在angular2中路由不同的组件或页面

Question

我是 angular2 的新手，我正在尝试通过我的组件进行路由，但出现错误：

我知道路径出错了，但我不知道如何在我的配置中提及它。下面是我的 app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { IndexComponent } from './home/index.component';
import { CarouselComponent } from './shared/carousel/carousel.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { MerchMngDashboardComponent } from './merchmng/dashboard/dashboard.component';

export const welcomeroutes: Routes = [
    { path: '', component: CarouselComponent, pathMatch: 'full' },
    { path: '', component: HeaderComponent, outlet: 'header' },
    { path: 'login', component: LoginComponent },
    { path: 'index', component: IndexComponent }
];
export const appRoutes: Routes = [
    { path: '', component: CarouselComponent, pathMatch: 'full' },
    { path: 'dashboard', component: MerchMngDashboardComponent },

]

;

这是我的文件夹结构：

这就是我在 index.component.html

中使用它的方式

  <div class="dvIndexInnerHeader">
                        <a class="" [routerLink]="['dashboard']">MM</a>
                    </div>

和我的 index.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { Routes } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { appRoutes } from '../app.routing';
import { IndexComponent } from './index.component'
@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, appRoutes],
    declarations: [IndexComponent],
    exports: [IndexComponent]
})
export class IndexModule { }

请帮忙

Answer 1

在您的 index.module.ts 中，您不能像在导入中那样直接传递路由。你需要像这样传递它：

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes)],
    declarations: [IndexComponent],
    exports: [IndexComponent]
})

我认为这只是您的代码有问题。希望我的回答对您有所帮助。 :)

如何在angular2中路由不同的组件或页面

how to route through different component or pages in angular2

angular2-routing