logo标签列表

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

angularangular-clirenameangular-components
288

除了手动编辑组件文件夹名称、.css、.ts、spec.ts 和 app.module.ts 等所有组件文件，还有没有使用 Angular CLI 重命名组件的快捷方式？

1
如果你想改变HTML标签，只需重命名选择器。如果你想改变类名，你需要手动修改。 - Alaksandar Jesus Gene
除非他们添加 ng destroy，否则你就没那么幸运了... - Kyle Krzeski
5
您可以在此线程中监控此功能：https://github.com/angular/angular-cli/issues/900 - Andrii Romanchak
1
搜索和替换，重命名几个文件/目录......工作完成 - ldgorman
1
这是新的线程，因为Angular团队决定不在他们的CLI中包含它。详情请见：https://github.com/angular/angular-cli/issues/900#issuecomment-642889197。 - Raphaël Balet
这篇帖子已经有200k的浏览量，这就是人们需要它的原因。他们会改变主意并为了开发者之间的友谊而提供这个功能吗？ - AkiZukiLenn
12个回答
304

不行！

没有命令可以更改使用组件创建命令生成的所有文件的名称。因此，需要手动重命名/编辑创建的ts、html、css/scss和.spec.ts文件。

我经常使用angular cli，我认为如果有这个命令就更好了，因为有时我们只是创建angular组件并需要重命名它们。由于没有此重命名命令，删除已创建的angular组件、指令等，然后再运行命令以创建组件真的很麻烦。

这里是添加此功能的讨论链接：重命名angular组件

2
新的 WebStorm 2018.1.2 版本允许重命名组件，但从未使用过。将来有机会再试试。 - Aniruddha Das
3
例如，在VSCode中，当出现问题（导入不存在的文件、不存在的组件等）时，左侧的文件浏览器窗格中会显示错误指示。所以，我的情况是需要重命名一个组件，我只需重命名其文件夹和内部文件名，然后按照所有错误指示进行修改此组件名称。我想这个功能现在也存在于其他现代IDE中...但是有一个像“ng g c ...”一样自动执行此操作的angular-cli命令将是很棒的！祝编码愉快！ :) - TheCuBeMan
2
自2016年以来，关于此功能一直存在讨论：https://github.com/angular/angular-cli/issues/900 所有对此功能的请求都与此线程相关并已关闭。@AniruddhaDas，您能否将此添加到答案中？ - Stefan
2
应该使用“move”命令而不是“rename”命令，因为“move”命令可以被用作“rename”命令。 - Mariusz
1
“nice-to-have”这个词实在是太轻描淡写了。现在已经是2023年了，这个功能居然还是缺失的。很遗憾我们不得不依赖VSCode来完成基本的CLI功能。组件是Angular的核心要素，而且谷歌肯定有足够的资源来处理这个问题。 - undefined
显示剩余2条评论
76

是的！

现在有一个VS Code扩展程序可以为您完成所有这些步骤，它被称为Rename Angular Component。

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

以前，在VS Code中至少需要进行三个半自动化步骤。但是这个扩展程序可以全部完成。

我意识到这在推广我自己的解决方案，但它是免费的、开源的，也是完整的答案。如果它不能满足您的所有需求，您可以在代码库上发布问题，它会被改进。

1
注意：它不会重命名.spec文件中的组件名称字符串。请查看：https://github.com/tomwhite007/rename-angular-component/issues/34。 - Yunus Gedik
3
它能够为我重命名.spec文件中的组件名称字符串。当然，现在是4/18/23。 - dgero95
太棒了，就像魔法一样！我改变了组件的名称和调用它的HTML。 - Asaf
像魔术一样的工作！非常感谢。 - Abhishek Mittal
请注意，它不会重新命名路由，所以您可能需要手动更新它们以反映实际的组件名称。 - undefined
不错，但它不会更新这些组件的路由和导入。 - undefined
71

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

您可以通过一些IDE实现此功能。

Intellij、Eclipse、VSCode等都默认支持重构。

现在，VSCode正在显示一些上升趋势，个人我是它的粉丝。

使用VSCode进行重构

确定引用：- 通过选择变量并按快捷键SHIFT+F12，VS Code可以帮助您找到所有变量的引用。这对Type Script非常有效。

重命名所有引用实例：- 找到所有引用后，您可以按F2打开弹出窗口，并更改值，然后单击“Enter”以更新所有引用实例。

重命名文件和导入 您可以使用插件重命名文件及其导入引用。更多详细信息请参见此处

enter image description here

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

3
你谈到了引用、文件和导入，但重命名组件呢？ - Ortomala Lokni
1
@OrtomalaLokni angular-cli 不支持重命名。可以通过以下三个步骤来完成重命名任务。 - SAMUEL
哇，喜欢这个扩展！ - Armando Guarino
14

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

1. 重命名组件类（使用VSCode的重命名符号功能将更新所有引用）

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

2. 使用 VSCode 的在文件中替换功能重命名 @Component 选择器及其引用：

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

那应该足够了。

4
谢谢，这是一个很好的清单。考虑到有一个繁琐但相当直接的手动过程，你会认为有人会将其自动化并将其作为 VS Code 的插件添加进去。 - Diskdrive
1
超级方便...！ - Fergus
5
尽管原帖要求CLI命令，但部分回答集中在IDE上。在这篇答案中，我只是确认当前的WebStorm/IntelliJ确实允许重命名组件。需要做的一切就是尝试重命名.ts文件中的类。你会看到如下界面：enter image description here,并且所有相关的地方都将被重命名。
这是由@Aniruddha Das在当前线程中首次报告的。 - P Marecki
请注意，这不会适当地重命名组件选择器。 - ivanjermakov
2

我个人还没有找到相应的命令。只需创建一个新组件（重命名），然后复制粘贴以前组件的 html、css 和 ts。在 ts 中，类名显然会被替换。这是最安全的方法，但需要花费一些时间。

“Original Answer” 翻译成中文是 “最初的回答”。

1

只需像平常一样重命名文件和组件，然后重新启动 ng serve。非常简单。

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

1
在WebStorm中，您可以右键单击 → 重构 → 重命名TypeScript文件中组件的名称，它将在所有地方更改名称。
0

要在Angular中更改组件名称，您需要按照以下步骤进行：

打开包含要重命名的组件的文件。

查找组件类定义上方的@Component装饰器。

将@Component装饰器中的选择器属性更改为您要赋予组件的新名称。

例如，如果您想将组件名称从my-old-component更改为my-new-component，则应执行以下操作：

@Component({
  selector: 'my-new-component',
  ...
})

export class MyOldComponent {
  ...
}

保存文件。 就这样！您已成功在Angular中更改了组件名称。

需要记住的是，您可能还需要更新应用程序其他部分（例如模板或路由配置）中对该组件的任何引用。

0

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接