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

除了手动编辑所有组件文件(如文件夹名、.css、.ts、spec.ts和app.module.ts)之外，在Angular CLI中有没有什么重命名组件的快捷方式?

197929 次浏览
小开
最佳答案

不!

没有命令会改变使用组件create命令生成的所有文件的名称。因此创建了ts， html， css/scss， .spec.ts

.文件需要手动重命名/编辑

我经常使用angular cli，我认为这将是一个很好的命令，因为有时我们只是创建angular组件，需要重命名它们。由于没有这个重命名命令，删除已创建的angular组件、指令等，然后再次运行命令来创建该组件真的很痛苦。

下面是添加这个特性重命名角分量的讨论链接

小开

目前，Angular CLI不支持重命名或重构代码的特性。

您可以在一些IDE的帮助下实现这样的功能。

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

现在VSCode呈现出一些上升趋势，我个人是它的粉丝

用VSCode重构

Determinig参考: - VS Code帮助你通过选择变量并按快捷键SHIFT + F12来查找变量的所有引用。

< p > 重命名所有引用实例: - 在找到所有的引用后，你可以按F2将打开一个弹出窗口，你可以更改值并单击enter，这将更新所有引用的实例

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

enter image description here

通过上述步骤，在重命名变量和文件后，您可以实现角组件的重命名。

小开
正如第一个答案所指出的，目前没有办法重命名组件，所以我们都只是在谈论变通办法! 这就是我所做的:

  1. 创建你喜欢的新组件

    生成组件newName

    . ng

  2. 使用Visual studio代码编辑器或任何其他编辑器，然后方便地移动代码/块并排!

  3. Linux下使用grep &Sed(查找&Replace)来查找/替换引用。

    Grep -ir "oldname"

    CD文件夹

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

    . sed -i 's/oldName/newName
小开

我个人还没有找到任何同样的命令。只需创建一个新组件(重命名名称)，并复制粘贴前一个组件的html、css和ts。在ts中，类名显然会被替换。这是最安全的方法，但需要一点时间。

小开

虽然OP请求CLI命令，但一些答案集中在ide上。在这个回答中，我只是确认，当前的WebStorm/IntelliJ允许重命名组件。所有需要做的就是尝试重命名.ts文件中的类。你会看到:

enter image description here

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

小开

在WebStorm中，你可以右键点击TypeScript文件中组件的名称→重构→重命名，它会在任何地方更改名称。

小开

只要像你通常认为的那样重命名文件和组件，然后重新启动ng serve。容易peasy。

重命名文件、路径和引用。关键是您必须关闭正在运行的服务器，并在重命名所有内容后重新启动它。

小开

如果你正在使用VS代码，你可以重命名.ts, .html, .css/.scss, .spec.ts文件，IDE将为你处理导入。因此，从组件中导入文件的文件(例如app.module.ts)将不会有任何抱怨。但是，您仍然必须在使用组件的任何地方重命名组件名称。

小开

下面是我用来重命名组件的检查表:

1.重命名组件类(VSCode 重命名符号将更新所有引用)

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

2.重命名@Component选择器和引用(使用VSCode的在文件中替换):

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的在文件中替换):

<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']
})

这就足够了

小开

没有rename cli命令。但我发现解决这个问题最简单的方法是在cli上生成一个新组件，并将内容复制到新组件中。 然后删除原始组件，在代码库中需要重命名为新组件名称的每个位置都会出现一个错误。一旦所有错误都处理好了，你就完成了!:) < / p >

另外，您还必须删除旧组件的导入语句。

小开

是的!

现在有了。

有一个扩展的VS Code为你做所有这些步骤。它叫做重命名Angular组件。

我希望将它移植到WebStorm和稍后的示意图。

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

我意识到这是在推广我自己的解决方案。但它是免费的、开源的，是完整的答案。如果它不能做你想要的所有事情，你可以在回购上发布问题，它会得到改进。


提交答案