Question

在static（6.0.7）中，我试图通过CLI生成组件。我输入Angular 6并收到错误消息 ng g c t01-01-03-lu-user

此名称固有地不允许使用某些东西吗？我已经通过Selector (app-t01-01-03-lu-user) is invalid.创建了一个名为t01-cafe的父模块，并且已成功创建。在该模块中，我尝试生成此组件。

我尝试创建一个不同的名称，例如ng g module t01-cafe，它可以正常工作-因此CLI似乎没有损坏。 Angular不喜欢在我的设置中命名组件ng g c t01-testComponent的事情。

编辑： 经过进一步测试，看来Angular不喜欢将破折号t01-01-03-lu-user后的第一个字符变成数字。可能与JavaScript变量中的限制类似。我认为既然将其编译为JavaScript？谁能详细说明/确认此组件的命名约束？

Answer 1

根据W3C standards选择器，应符合以下一组条件

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


仅字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（-）和下划线（_）；

它们不能以数字，两个连字符或连字符开头   一个数字

标识符也可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“ B＆W？”可以写为“ B \＆W \？”或“ B \ 26 W \ 3F”。

因此Angular遵循选择器名称的W3C约定。我应该在类似的内部代码中看到类似的东西。深入研究CLI代码后，事实证明angular在创建文件之前使用正则表达式（/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/）来验证selector的名称。

因此，在运行ng generate component component-name命令时，它将为@angular/schematics命令调用component并将组件名称参数传递给它。在执行带有指令集的命令时，它会触发below line来验证选择器。

validateHtmlSelector(options.selector);

validation.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.`);
  }
}

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

1 个答案: