Angular 类名称中的自定义后缀

Question

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

更具体地说，对于表示对话框的类，我想最后使用

Dialog

，而不是

DialogComponent

，因为它太长了。对于代表页面的类，我想使用

Page

，而不是

PageComponent

。

示例：

• 使用

  LoginDialog

  代替

  LoginDialogComponent

• 使用

  MainPage

  代替

  MainPageComponent

---

由于 Angular 中预设的

tslint

规则，简单的重命名是不可能的。

Answer 1

在 Angular 11 之前，使用 TSLint 完成 linting。 TSlint 已被弃用，现在使用 ESLint。

在

.eslintrc.js

文件中 - 在

IONIC

和

Angular <= v11

项目中，可以使用页面后缀创建组件，以区分页面和页面中使用的“组件”。以下

rule

将 Page 添加为已知后缀。

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

Answer 2

在项目根目录中打开

tslint.json

并更新

component-class-suffix

属性：

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

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

Answer 3

您可以编辑

tslint.json

，并使用以下规则：

"component-class-suffix": false

这将防止任何 linting 错误