Angular：頁面路由的配置（包含頁面的複用）

在模塊Module的路由配置模塊（routing.module.ts）中進行頁面的子路由配置：

/**
 * 子路由配置
 */
const childRoutes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },       //  默認路由
  { path: 'list', component: CommercialListComponent },
  {
    path: 'view/:type/:id',                                  // 查看頁面、編輯頁面、新增頁面可以服用本頁面
    component: ViewComponent
  },
];

以上我們可以看到最後一條路由的配置可以接入參數包含type和id這樣可以實現查看、編輯、新增頁面的複用——
在頁面組件中聲明跳轉的頁面路由：

 /**
  * 更多操作
  * @param type
  * @param data
  */
  doOptions(type, data) {
    switch (type) {
      case '1':                     // 查看
        this.router.navigate(['../view', 'view', data.id], { relativeTo: this.activatedRoute });
        break;
      case '2':                     // 修改
        this.router.navigate(['../view', 'edit', data.id], { relativeTo: this.activatedRoute });
        break;
    }
  }

由此可以控制在不同的頁面，字段的某些屬性不同（例如是否顯示、是否可以修改等屬性）：在構造函數中取到activatedRoute的params，控制在不同的type下的不同屬性：

constructor(
    .......
    private activatedRoute: ActivatedRoute,
  ) {
    this.acceptPicType = this.globalProvider.acceptPicType;
 
    this.activatedRoute.params.subscribe(params => {
      if (!_.isEmpty(params)) {                    // 根據修改或查看頁面的type來控制
        this.optionType = params.type;
        if (this.optionType === 'view') {
          this.pageTitle = '商戶信息詳情';
          this.id = params.id;
          this.isAdd = false;
          this.isReadOnly = true;
        } else if (this.optionType === 'edit') {
          this.pageTitle = '修改商戶信息';
          this.id = params.id;
          this.isAdd = false;
          this.isReadOnly = false;
        }
      }
    });
  }