时间戳

首页 > 解决方案 > Angular 组件命名限制 - “选择器 [您的组件名称] 无效”

angular - Angular 组件命名限制 - “选择器 [您的组件名称] 无效”

问题描述

在Angular 6（6.0.7）中，我试图通过 CLI 生成一个组件。我输入ng g c t1-2-3-user并收到错误消息Selector (app-t1-2-3-user) is invalid.

这个名字有什么本质上不允许的吗？我已经创建了一个名为t1-myModulevia的父模块，ng g module t1-myModule并且创建成功。在该模块内是我试图生成这个组件的地方。

我已经尝试创建一个不同的名称，ng g c t1-testComponent并且它工作正常 - 所以 CLI 似乎没有被破坏。t1-2-3-userAngular 不喜欢在我的设置中命名组件。

编辑： 经过进一步测试，Angular 似乎不喜欢破折号后的第一个字符-是数字。可能与 JavaScript 变量中的限制类似。我假设因为它被编译成 JavaScript？谁能详细说明/确认这个组件命名约束？

标签： angulartypescriptvisual-studio-codeangular-cliangular6

解决方案

根据W3C 标准，选择器应符合以下条件

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）可以包含

  1. 只有字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；
  2. 它们不能以数字、两个连字符或一个连字符后跟一个数字开头
  3. 标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？” 可以写成“B\&W\?” 或“B\26 W\3F”。

所以 Angular 遵循 W3C 的选择器名称约定。我预计会在某处的内部代码中看到类似的东西。深入研究 CLI 代码后发现，Angular在创建文件之前使用 regex ( /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) 来验证名称。selector

因此，在运行命令时，ng generate component component-name它会调用命令并将组件名称参数传递给它。在使用一组指令执行命令时，它会在行下方触发以验证选择器。@angular/schematicscomponent

validateHtmlSelector(options.selector);

验证.ts

export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
export function validateHtmlSelector(selector: string): void {
  if (selector && !htmlSelectorRe.test(selector)) {
    throw new SchematicsException(tags.oneLine`Selector (${selector})
        is invalid.`);
  }
}

推荐阅读