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

Question

在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？谁能详细说明/确认这个组件命名约束？

Answer 1

根据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/schematics的component命令和组件名称参数传递给它.在执行带有指令集的命令时,它会在行下方触发以验证选择器.

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