angular router常用配置

Angular’s Route


const routes: Routes = [
  {
    // 来源管理 一览
    path: 'sourceList',
    component: SourceListComponent
  },
  {
    // 推广二维码 一览
    path: 'qrcodeList',
    component: QrcodeListComponent,
  },
  {
    // 推广二维码 新建/编辑
    path: 'qrcodeEdit',
    component: QrcodeEditComponent,
  },
  {
    // 推广二维码 详情
    path: 'qrcodeDetail',
    component: QrcodeDetailComponent,
  },
  {
    // 默认路由 -> 推广二维码 一览
    path: '',
    redirectTo: 'qrcodeList',
    pathMatch: 'full'
  },
];
禁止浏览器history
https://angular.io/api/router/RouterLink

<a routerLink='/sharing'  skipLocationChange="false">
https://angular.io/api/router/NavigationExtras

// Navigate silently to /view
this.router.navigate(['/view'], { skipLocationChange: true });
路由守护
TODO

路由传值
html里的路由跳转
<!-- 如果没有参数要传的话，不需要加queryParams -->
<a nz-button nzType="default" routerLink="/qrcodeEdit" [queryParams]="{'id': item.id}">编辑</a>
组件里的路由跳转
// this.router是@angular/router模块里的Router
this.router.navigate(["/qrcodeEdit"], { id: qrcodeId });
路由参数获取
使用Angular路由模块中的ActivatedRoute

/**
 * 在ngOnInit里去获取路由中的参数
 */
public ngOnInit() {
  // ActivatedRoute是@angular/router模块里的
  this.activeRoute.queryParams.subscribe(params => {
    if (params.id && params.id !== "") {
      this.id = params.id;
    }
  });
}
TODO：还有一种是snapshot的方式获取，补充使用示例，以及两种方式的区别

通过路由设置每个页面标题
在app-routing.module.ts里添加data: { title: 'xxx' }

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'fissionList',
    component: FissionListComponent,
    data: { title: '模板活动' }
  },

  {
    path: '',
    redirectTo: '/fissionList',
    pathMatch: 'full'
  },
  {
    path: 'fissionEdit',
    component: FissionEditComponent,
    data: { title: '模板活动' }
  },
  {
    path: 'fissionView',
    component: FissionViewComponent,
    data: { title: '模板活动详情' }
  }
];
列表页：

// fission-list.ts
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

constructor(
  private activeRoute: ActivatedRoute,
  private title: Title
) {}

public ngOnInit() {
  this.title.setTitle(this.activeRoute.snapshot.data.title);
}
新建、编辑页：

// fission-edit.ts
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

constructor(
  private activeRoute: ActivatedRoute,
  private title: Title
) {}

public ngOnInit() {
  this.activeRoute.queryParams.subscribe(params => {
    if (params.id && params.id !== "") {
      this.title.setTitle(`编辑${this.activeRoute.snapshot.data.title}`);
    } else {
      this.title.setTitle(`新建${this.activeRoute.snapshot.data.title}`);
    }
  });
}