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'));
}
```
