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> 

穿戴路由器出口元件通過路由到呈現組件。