有人可以帮我向这段代码添加 angular2.0 路由吗？

Question

谁能帮我在这段代码中添加路由？

https://github.com/pkozlowski-opensource/ng2-play

Answer 1

检查这个回购协议。它有一个有效的路由器解决方案：https://github.com/kentcdodds/angular2-webpack-starter

Answer 2

这是另一个带有现场演示的简单工作路由器：http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0

Answer 3

在app.module.ts

import { AppRoutingModule } from './app.routing.module';
@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    // other modules
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

现在 app.routing.module

import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

现在在主要组件中 html

<div class="container">
    <a routerLinkActive="active" 
       routerLink="/login">Login</a> |

    <a routerLinkActive="active" 
       routerLink="/home">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 

    <router-outlet></router-outlet>
  </div>

这里是 stackblitz 给你的例子

有人可以帮我向这段代码添加 angular2.0 路由吗？

Can some one help me to add angular2.0 routing to this code?

angular