Angular 2组件路由

Question

我打算开始学习angular 2组件路由器。

我已经使用了Angular UI路由器。我所有的项目都使用了UI路由器复杂的功能，如嵌套状态和嵌套命名视图。

什么是良好的开始使用角2组件路由器？

如何在Angular 2组件路由器中配置嵌套状态？

Answer 1

总之，我想说的路由是非常简单和直观的角度2

我会建议通过router docs阅读让所有的基础知识。

请记住，子组件也可以有路由。他们从父母的路线建立。

app.component.ts（节选）

@Component({ ... }) 
@RouteConfig([ 
    {path:'/crisis-center/...', name: 'CrisisCenter', component: CrisisListComponent}, 
    {path:'/heroes',  name: 'Heroes',  component: HeroListComponent}, 
    {path:'/hero/:id',  name: 'HeroDetail', component: HeroDetailComponent} 
]) 
export class AppComponent { } 

危机center.component.ts（节选）

@RouteConfig([ 
    {path:'/',   name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true}, 
    {path:'/:id',  name: 'CrisisDetail', component: CrisisDetailComponent} 
]) 

注意，路径以斜线结尾和三个后周期（/ ...）。

这意味着这是一条不完整的路线（也就是非终点路线）。完成的路线将是父/危机中心/路线和属于指定组件的子路由器的路线的某种组合。

一切都很好。父路由的指定组件是CrisisCenterComponent，它是一个具有自己的路由器和路由的路由组件。

从angular.io router guide

Answer 2

您可以定义象下面这样app.routing.ts。

export const routes: Routes = [ 
    { 
     path: '', 
     component: SimpleLayoutComponent, 
     data: { 
     title: 'Login form' 
     }, 
    children: [ 
     { 
      path: '', component: LoginComponent, 
     } 
    ] 
    }, 
    { 
     path: 'dashboard', 
     component: FullLayoutComponent, 
     data: { 
     title: 'Home' 
     }, 
     children: [ 
     { 
      path: '', 
      component: 'mycomponent' 
     } 
     ] 
    } 
]; 

然后将此类导入到您的app.module.ts文件中，如下所示。

import { AppRoutingModule }    from './app.routing'; 
@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    AppRoutingModule, 
], 
declarations: [ 
    AppComponent, 
    LoginComponent 
], 
providers: [ 
UserService, AuthGuard], 
bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts下面：观点得到注入

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'body', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { } 

Answer 3

@NgModule({ 
declarations: [AppComponent,CreateComponent,ListComponent], 
imports: [ 
BrowserModule, 
FormsModule, 
ReactiveFormsModule, 
HttpModule, 
RouterModule.forRoot([ 
    {path:"",component:ListComponent}, 
    {path:"Create",component:CreateComponent}, 
    ]) 
], 
bootstrap: [AppComponent] 

}) 

将这个RouterModule在app.module文件。

为此，您必须导入{RouterModule};在app.component.html

<router-outlet></router-outlet> 

穿戴路由器出口元件通过路由到呈现组件。