Angular 11中如何扩展ui-router状态？无需重复声明

你可以利用ES6的对象扩展运算符（...）快速继承原有状态的所有属性，仅修改需要调整的部分，无需重复声明全部内容。

示例代码 #

假设你已有myState状态定义，要扩展出一个新状态myStateExtended，可以这样写：

export const myState: Ng2StateDeclaration = {
  name: "myState",
  url: "mystate",
  component: "myComponent",
  params: {
    param1: "",
    param2: ""
  }
};

// 扩展出新状态
export const myStateExtended: Ng2StateDeclaration = {
  // 继承原有状态的所有属性
  ...myState,
  // 覆盖或新增需要修改的属性
  name: "myStateExtended",
  url: "mystate/extended",
  // 按需修改params：继承原有参数，新增或修改单个参数
  params: {
    ...myState.params,
    param3: "defaultValue"
  },
  // 若需替换组件，直接重新赋值即可
  // component: "myExtendedComponent"
};

关键说明 #

• ...myState会将原有状态的所有属性（name、url、component、params等）浅拷贝到新对象中
• 后续声明的属性会覆盖原有属性的值，比如新的name和url会替换原状态的对应内容
• 对于嵌套对象（比如params），同样可以用扩展运算符继承原有内容，再修改单个字段，避免重复编写全部参数
• Angular项目默认支持ES6+语法，无需额外配置

内容的提问来源于stack exchange，提问作者chows2603