角度组件命名限制-'选择器[您的组件名称]无效' [英] Angular component naming limitations - 'selector [your component name] is invalid'

问题描述

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

In Angular 6 (6.0.7) I'm trying to generate a component via the CLI. I type in ng g c t1-2-3-user and get the error message Selector (app-t1-2-3-user) is invalid.

此名称固有地不允许使用某些东西吗?我已经通过ng g module t1-myModule创建了一个名为t1-myModule的父模块，并且该模块已成功创建.我正在尝试在该模块中生成此组件.

Is there something inherently not allowed in this name? I've already created a parent module called t1-myModule via ng g module t1-myModule and it was created successfully. Within that module is where I'm trying to generate this component.

我尝试创建一个不同的名称，例如ng g c t1-testComponent，并且可以正常工作-因此CLI似乎没有损坏. Angular不喜欢在我的设置中命名组件t1-2-3-user的事情.

I've tried creating a different name like ng g c t1-testComponent and it works fine - so the CLI doesn't appear to be broken. Something about naming a component t1-2-3-user in my setup is not liked by Angular.

经过进一步测试，看来Angular不喜欢连字符-后的第一个字符是数字.可能与JavaScript变量中的限制类似.我认为既然将其编译为JavaScript?谁能详细说明/确认此组件的命名约束?

after further testing, it appears Angular doesn't like the first character after a dash - to be a number. Possibly a similar limitation as in JavaScript variables. I assume since it gets compiled into JavaScript? Can anyone elaborate on/confirm this component naming constraint?

推荐答案

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

As per W3C standards selector should qualify below set of things

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain

1. 仅字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符(-)和下划线(_)；
2. 它们不能以数字，两个连字符或连字符开头 一个数字
3. 标识符也可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项).例如，标识符"B&?W?"可以写为"B \& W \?"或"B \ 26 W \ 3F".

1. only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_);
2. they cannot start with a digit, two hyphens, or a hyphen followed by a digit
3. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

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

So Angular is following the W3C convention for selector name. I was expected to see similar thing baked in inside code somewhere. After digging into CLI code It turns out that angular uses regex (/^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/) to validate selector name before creating files.

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

So while running ng generate component component-name command it calls @angular/schematics for component command and pass the component name parameter to it. While executing command with set of instruction it fires below line to validate selector.

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

这篇关于角度组件命名限制-'选择器[您的组件名称]无效'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！