web-dev-qa-db-ja.com

Angularコンポーネントの名前付けの制限-「セレクタ[コンポーネント名]は無効です」

_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_という名前を付けることは、Angularには好まれません。

編集：さらにテストを行った結果、次のように表示されますAngularダッシュの後の最初の文字_-_が数値であることは望ましくありません。 JavaScript変数の場合と同様の制限です。JavaScriptにコンパイルされるためと思いますか？このコンポーネントの命名制約について詳しく説明/確認できますか？

angulartypescriptvisual-studio-codeangular-cliangular6
11
Kyle Vassella

W3C標準 セレクターに従って、セレクターは以下のもののセットを修飾する必要があります

CSSでは、識別子（セレクターの要素名、クラス、IDを含む）に

  1. 文字[a-zA-Z0-9]およびISO 10646文字U + 00A0以上、さらにハイフン（-）および下線（_）のみ。
  2. 数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。
  3. 識別子には、エスケープ文字と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名を検証していることがわかります。

そのため、ng generate component component-nameコマンドの実行中に、@angular/schematics for 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.`);
  }
}
10
Pankaj Parkar