Angular 类名中的自定义后缀

Question

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

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

例子：

• 使用LoginDialog代替LoginDialogComponent
• 使用MainPage代替MainPageComponent

---

由于tslintAngular 中预设的规则，简单的重命名是不可能的。

Answer 1

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

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

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

Answer 2

在 .eslintrc.js 中 - 我正在使用 IONIC，并且许多组件都是使用 Page 后缀创建的，以将页面与页面中使用的“组件”区分开来。以下添加 Page 作为已知后缀。

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