如何在Angular CLI中重命名组件？

Question

除了手动编辑文件夹名称,.css,.ts,spec.ts和app.module.ts等所有组件文件之外,是否有任何使用Angular CLI重命名组件的快捷方式？

Answer 1

没有!

没有命令可以更改使用component create命令生成的所有文件的名称.所以创造ts,html,css/scss,.spec.ts 文件需要手动重新命名/编辑.

我经常使用,angular cli我认为这是一个很好的命令,因为有时我们只是创建角度组件并需要重命名它.由于此重命名命令不存在,删除创建的角度组件,指令等并再次运行命令来创建组件真的很痛苦.

Answer 2

是的！

现在有了。

有一个 VS Code 扩展可以为您执行所有这些步骤。它称为重命名角度组件。

我希望稍后将其移植到 WebStorm 和 Schematic 中。

以前，在 VS Code 中至少需要三个半自动化步骤。这个扩展可以完成所有这些。

我意识到这是在推广我自己的解决方案。但它是免费的、开源的、完整的答案。如果它不能完成您想要的所有操作，您可以在存储库上发布问题，它将会得到改进。

Answer 3

目前,Angular CLI不支持重命名或重构代码的功能.

您可以在某些IDE的帮助下实现此类功能.

Intellij,Eclipse,VSCode等..默认支持重构.

如今VSCode正呈现出一些上升趋势,我个人对此充满了喜爱

使用VSCode进行重构

确定参考: - VS代码通过选择变量并按快捷键SHIFT+ 帮助您找到变量的所有引用F12.使用Type Script非常好用.

重命名所有引用实例: - 找到您可以按下的所有引用后,F2将打开一个弹出窗口,您可以更改该值并单击"输入",这将更新所有引用实例.

重命名文件和导入 您可以使用插件重命名文件及其导入引用.更多细节可以在这里找到

通过重命名变量和文件后的上述步骤,您可以实现角度组件重命名.

Answer 4

这是我用来重命名组件的清单：

1.重命名组件类（VSCode重命名符号会更新所有引用）

<Old Name>Component => <New Name>Component

2.重命名@Component 选择器和引用（使用 VSCode 的Replace in Files）：

app-<old-name> => app-<new-name>

Result:
@Component({
  selector: 'app-<old-name>' => 'app-<new-name>',
  ...
})

<app-{old-name}></app-{old-name}> => <app-{new-name}></app-{new-name}>

3.重命名组件文件夹（在VSCode中重命名文件夹时，会更新模块和其他组件中的引用）

src\app\<module>\<old-name> => src\app\<module>\<new-name>

4.重命名组件文件（手动重命名最快，但您也可以使用终端一次重命名）

<old-name>.component.* => <new-name>.component.*

Bash:
find . -name "<old-name>.component.*" -exec rename 's/\/<old-name>\.component/\/<new-name>.component/' '{}' +

PowerShell: 
Get-Item <old-name>.component.* | % { Rename-Item $_ <new-name>.component.$($_.Extension) }

Cmd:
rename <old-name>.component.* <new-name>.component.*

5.替换@Component中的文件引用（使用VSCode的Replace in Files）：

<old-name>.component => <new-name>.component

Result:
@Component({
  ...
  templateUrl: './<old-name>.component.html' => './<old-name>.component.html',
  styleUrls: ['./<old-name>.component.scss'] => ['./<new-name>.component.scss']
})

那应该足够了

Answer 5

虽然 OP 要求使用 CLI 命令，但一些答案集中在 IDE 上。在这个答案中，我只是确认当前的 WebStorm/IntelliJ 确实允许重命名组件。需要做的就是尝试重命名文件中的类.ts。您将看到：

并且重命名将在所有相关的地方进行。