代码之家 › 专栏 › 技术社区 › Kyle Vassella

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

angular6 angular-cli visual-studio-code typescript angular

Kyle Vassella · 技术社区 · 6 年前

在里面 Angular 6 (6.0.7)我正在尝试通过CLI生成组件。我打字 ng g c t1-2-3-user Selector (app-t1-2-3-user) is invalid.

t1-myModule ng g module t1-myModule 它成功地创建了。在这个模块中,我正试图生成这个组件。

我尝试过创建一个不同的名称,比如 ng g c t1-testComponent 它工作正常-因此CLI似乎没有损坏。有关命名组件的内容 t1-2-3-user 在我的设置是不喜欢的角度。

编辑: 经过进一步测试,它似乎不喜欢破折号后的第一个字符 - 成为一个数字。可能存在与JavaScript变量类似的限制。我想既然它被编译成JavaScript?有人能详细说明/确认此组件命名约束吗?

1 回复 | 直到 5 年前

Pankaj Parkar 6 年前

W3C standards 选择器应符合以下条件:

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

仅字符[a-zA-Z0-9]和ISO 10646字符U+00A0及以上,加上连字符(-)和下划线(33;);

它们不能以数字、两个连字符或连字符后跟数字

标识符还可以包含转义字符和任何ISO10646字符作为数字代码(请参阅下一项)。例如,标识符“B&“W”可以写为“B\&“W\?”或“B\26 W\3F”。

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

推荐文章