Augular 路由

### 路由配置

```

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

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

const routes: Routes = [

  {

    path: '',  redirectTo: 'home', pathMatch: 'full'

  },

  {

    path: 'home', component: HomeComponent,

  },

  {

    path: 'about', component: AboutComponent,

  },

{

    path: 'tutorial', component: TutorialComponent,

    children: [

      {

        path: '', redirectTo: 'started', pathMatch: 'full'

      },

      {

        path: 'started', component: TutorialStartedComponent

      },

      {

        path: 'model/api', component: TutorialModelComponent

      },

      {

        path: 'topic/analysis/ae', component: TutorialAnalysisComponent,

      },

      // {

      //  path: 'model/:key', component: TutorialModelComponent

      // },

      // {

      //  path: 'topic/:key/:sub', component: TutorialAnalysisComponent,

      // },

    ]

  },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule { }

```

### 组件

#### slide 组件

```

<div class="nav-contain-tutorial">

    <div class="nav-item"  *ngFor="let link of links" >

      <div class="large">

        <img *ngIf="!rla.isActive" [src]="'../../assets/images/'+ link.icon +'.png'">

        <img  *ngIf="rla.isActive"  [src]="'../../assets/images/'+ link.icon + '_selected.png'">

        <!-- <img [src]="'../../assets/images/'+link.icon+'.png'"> -->

        <a  class="title" [routerLink]="link.path" routerLinkActive="story-span-active" #rla="routerLinkActive"> {{link.label}}</a>

        <div *ngIf="link.children && link.children.length>0" >

          <div  *ngFor="let child of link.children">

          <a  [routerLink]="child.path" routerLinkActive="story-span-active" class="sub"  #rla="routerLinkActive">

            <span class="third_child" [ngClass]="{'third_link': child.children, 'third_link-active':rla.isActive && child.children}"></span>

            {{child.label}}</a>

            <ng-container *ngIf="child.children && child.children.length>0">

              <ng-container  *ngFor="let third of child.children">

                <a  [routerLink]="third.path" routerLinkActive="story-span-active" class="sub third"  #rla="routerLinkActive">{{third.label}}</a>

              </ng-container>

            </ng-container>

          </div>

        </div>

      </div>

    </div>

  </div>

```

#### ts

```

this.links = [

      new NavLink('Getting Started', 'started', 'GettingStarted'),

      new NavLink('General model usage', 'model', 'Advanced_topics', [

        new NavLink('Use model API', 'model/api'),

        new NavLink('Configure your model', 'model/config'),

        new NavLink('Customize your model', 'model/custome'),

        new NavLink('Contribute your model', 'model/contribute')

      ]),

      new NavLink('Advanced Topics', 'topic', 'generalmodelusage', [

        new NavLink('Time-series analysis ', 'topic/analysis', '', [

          new NavLink('Auto-encoder', 'topic/analysis/ae')

        ]),

        new NavLink('Computer Vision', 'topic/vision', '', [

          new NavLink('Object Detection ', 'topic/vision/od')

        ])

      ]),

    ];

```

### NavLink  model

```

export class NavLink {

    constructor(

      public label: string,

      public path: string,

      public icon?: string,

      public children?: Array<NavLink>,

    ) { }

  }

```

### 路由出口

```

  <router-outlet></router-outlet>

```

### 获取当前路由

```

this.route.snapshot.routeConfig.path;

this.route.paramMap.subscribe((params: ParamMap) => {

        console.log(params.get('nav'), params.get('key'));

}

```