web-dev-qa-db-ja.com

コンポーネントの名前を変更する方法 Angular CLI？

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

angularangular-components
104
Thomas Easo

いいえ！

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

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

これはこの機能を追加するためのディスカッションリンクです 角度成分の名前を変更

121
Aniruddha Das

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

あなたはいくつかのIDEの助けを借りてそのような機能を達成することができます。

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

今日ではVSCodeはいくらか上昇傾向を見せています、個人的には私はこのファンです

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

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

すべての参照インスタンスの名前変更 ： - F2を押すとポップアップが表示され、値を変更して[enter]をクリックするとすべての参照インスタンスが更新されます。

ファイル名とインポート名の変更 プラグインを使ってファイル名とインポート参照名を変更できます。詳細を見つけることができます ここ

enter image description here

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

27
Samuel J Mathew

更新：あなたのコンポーネントの名前を変更するために、あなたは使うことができます：ng-rn

npm i ng-rn

使用方法 

  cd /path/to/angular-project/
  ng-rn old-button fancy-button

ツールはsrc/app /内のコンポーネントを探します。コンポーネントがsrc/app/my-vip-componentsのようなもっと複雑なパスにある場合は、ディレクトリを変更するだけです。

  cd src/app/my-vip-components
  ng-rn old-button fancy-button

変更する前に、バックアップを作成してください:)

2
Diego Venâncio

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

インストール

npm install -g angular-rename

つかいます

$ ./angular-rename OldComponentName NewComponentName
0
Emrah Izci

最初の答えが示したように、現時点ではコンポーネントの名前を変更する方法はありませんので、私たちはみんな回避策について話しているだけです！これが私がすることです：

  1. あなたが好きな新しいコンポーネントを作成します。

    ng生成コンポーネントnewName

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

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

    grep -ir "oldname"

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

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

0
Salah-1

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

0
Priyanka Arora