Angular 组件命名限制 - “选择器 [您的组件名称] 无效" [英] Angular component naming limitations - 'selector [your component name] is invalid'
问题描述
在 Angular 6
(6.0.7) 中,我试图通过 CLI 生成一个组件.我输入 ng gc 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
- 仅字符 [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
名称.
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);
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.`);
}
}
这篇关于Angular 组件命名限制 - “选择器 [您的组件名称] 无效"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!