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

问题描述

在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

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

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