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