Angular 2新路由器 - 路由未显示在<router-outlet> </router-outlet>中

时间:2016-08-10 22:56:55

标签: angular routing router

Angular 2的新手并没有完全达到新路由器的速度。我已经按照Angular文档中的示例进行了操作,虽然我没有收到错误,但我的组件没有显示在标记中。

这是路由器代码:

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

import {HomeComponent} from './home.component';
import {FeaturesComponent} from './features.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },,
  { path: 'features', component: FeaturesComponent },
  { path: '**', component: HomeComponent }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(appRoutes);

在这里添加app.module.ts代码:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { routing,
         appRoutingProviders } from './app.routing';

import {HomeComponent} from './home.component';
import {FeaturesComponent} from './features.component';

@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent, HomeComponent, FeaturesComponent ],
  providers: [appRoutingProviders],
  bootstrap: [ AppComponent ]
},
)
export class AppModule { }

我在app.component.html中有这样的routeroutlet标记

<div class="container">
  <router-outlet></router-outlet>
</div>

这里有什么我想念的吗?我的印象是,我的home.component.ts应该显示在它未执行的页面加载的路由器插座标记中。任何指导都将非常感谢。谢谢。

1 个答案:

答案 0 :(得分:1)

我通过按照这些新准则https://angular.io/docs/ts/latest/guide/router.html重做routing.ts和module.ts解决了这个问题。我不确定问题究竟是什么,可能是appRoutes常量中的双逗号。