Angular CLIでコンポーネントの名前を変更するにはどうすればよいですか？

フォルダー名、.css、.ts、spec.ts、app.module.tsなどのすべてのコンポーネントファイルを手動で編集する以外に、Angular CLIでコンポーネントの名前を変更するショートカットはありますか？

番号！

コンポーネント作成コマンドを使用して生成されたすべてのファイルの名前を変更するコマンドはありません。だから、作成されたts、html、css/scss、.spec.ts ファイルを手動で編集/名前を変更する必要があります。

私は頻繁に使用してangular cliおり、角度コンポーネントを作成して名前を変更する必要がある場合があるので、これは便利なコマンドだと思います。このrenameコマンドは存在しないため、作成された角度コンポーネントやディレクティブなどを削除し、コンポーネントを作成するコマンドを再度実行するのは本当に面倒です。

この機能を追加するためのディスカッションリンクは次のとおりです。

現在、Angular CLIは、コードの名前変更またはリファクタリングの機能をサポートしていません。

一部のIDEを使用すると、このような機能を実現できます。

Intellij、Eclipse、VSCodeなどはデフォルトでリファクタリングをサポートしています。

今日、VSCodeはいくつかの上昇傾向を示しています、個人的に私はこれのファンです

VSCodeによるリファクタリング

参照の決定：-VSコードは、変数を選択してショートカットSHIFT+ を押すことにより、変数のすべての参照を見つけるのに役立ちますF12。これは、タイプスクリプトで非常にうまく機能します。

参照のすべてのインスタンスの名前を変更する：-押すことができるすべての参照を見つけた後F2、ポップアップが開き、値を変更してEnterをクリックすると、参照のすべてのインスタンスが更新されます。

ファイルとインポートの名前変更 プラグインを使用して、ファイルとそのインポート参照の名前を変更できます。詳細はこちら

変数とファイルの名前を変更した後の上記の手順で、角度コンポーネントの名前を変更できます。

angular-renameを参照してください

インストール

npm install -g angular-rename

使用する

$ ./angular-rename OldComponentName NewComponentName

OPはCLIコマンドを要求しますが、一部の回答はIDEに焦点を当てています。この回答では、現在のWebStorm / IntelliJでコンポーネントの名前を変更できることを確認しました。実行する必要があるのは、.tsファイル内のクラスの名前を変更することだけです。以下が表示されます：

名前の変更は、関連するすべての場所で実行されます。

最初の答えが示したように、現時点ではコンポーネントの名前を変更する方法はないため、回避策について話し合っています。これが私がすることです：

1. 気に入った新しいコンポーネントを作成します。

   ng生成コンポーネントnewName

2. Visual Studioのコードエディターまたはその他のエディターを使用して、コード/ピースを並べて移動できます。

3. Linuxでは、grep＆sed（検索と置換）を使用して、参照を検索/置換します。

   grep -ir "oldname"

   あなたのフォルダをcdする

   sed -i 's / oldName / newName / g' *

私は個人的にはそのためのコマンドを見つけていません。ただ、新しいコンポーネント（名前を変更名前）を作成し、前のコンポーネントの貼り付けコピーhtml、cssとts。でts明らかにクラス名は置き換えられます。最も安全な方法ですが、少し時間がかかります。

WebStormでは、TypeScriptファイル内のコンポーネントの名前を右クリック→リファクタリング→名前の変更を行うと、どこでも名前が変更されます。