Angular class 实例在生产构建中提供 object 实例

Question

我正在使用Angular 8

在应用程序中，我有一个对象数组，可以在 HTML 中相应地呈现数据

public components = [
  {
    type: "button",
    data: {
      label: "Click here"
    }
  },
  {
    type: "description_box",
    data: {
      content: "Enter description"
    }
  }
]

现在有两个按钮Add Button和Add Description Box当用户单击按钮时，请求的 object 被推送到components数组，其处理方式如下

onClick(component: string) {
  switch(component) {
    case 'button': data = new Button(); break;
    case 'description_box': data = new DescriptionBox(); break;
  }

  this.components.push({
    type: this.getTypeFromData(data),
    data: data
}

/**
 * spit class constructor name in lowercase underscored
 * Ex: DescriptionBox -> description_box
 */
private getTypeFromData(data) {
  const className = data.constructor.name.split(/(?=[A-Z])/);

  let componentType = '';
  for (const name of className) {
    componentType += name + '_';
  }

  return componentType.toLowerCase().slice(0, -1);
}

这两个类就像

components.ts

export class Button {
  label: string;
  color: {
    label: string;
    button: string;
    border: string;
  };
  link: string;
}

export class DescriptionBox {
  text = 'New Title';
}

这在本地开发中运行良好，但在生产构建中没有按预期工作。

在生产版本中，class 实例给出了o object 而不是 class 实例。

Answer 1

这是因为你的课程被缩小了，所以它会占用更少的空间。 您可以使用data instanceof DescriptionBox代替检查constructor.name ，而不是检查它。