Angular class 名称中的自定义后缀

Question

是否可以将 Angular 7（使用 CLI 7.x）项目配置为使用默认后缀以外的 class 名称后缀？

更具体地说，对于表示对话框的 classes，我想在最后使用 Dialog，而不是 DialogComponent，这太长了。对于代表页面的 classes，我想使用 Page，而不是 PageComponent。

示例：

由于 Angular 中预设的 tslint 规则，无法进行简单的重命名。

Answer 1

您可以编辑 tslint.json，并使用以下规则：

"component-class-suffix": false

这将防止任何 linting 错误

Answer 2

在项目的根目录中打开 tslint.json 并更新 component-class-suffix 属性:

{
  ...
  "component-class-suffix": [true, "Component", "View"]
  ...
}

如果您希望默认后缀仍然有效，请注意组件应保留在那里。

Answer 3

in .eslintrc.js - 我使用的是 IONIC，许多组件都是用页面后缀创建的，以区分页面和页面中使用的 'components'。下面添加 Page 作为已知后缀。

'@angular-eslint/component-class-suffix': [
      'warn',
      {
        suffixes: ['Component', 'Page'],
      },
    ],

Custom suffix in Angular class names