除了手动编辑所有组件文件(如文件夹名、.css、.ts、spec.ts和app.module.ts)之外,在Angular CLI中有没有什么重命名组件的快捷方式?
当前回答
在WebStorm中,你可以右键点击TypeScript文件中组件的名称→重构→重命名,它会在任何地方更改名称。
其他回答
如果你使用VS Code,你可以重命名。ts, .html, .css/。scss .spec。ts文件和IDE将为您处理导入。因此,从组件中导入文件的文件(如app.module.ts)将不会产生任何抱怨。但是,您仍然必须在使用组件的任何地方重命名组件名称。
下面是我用来重命名组件的检查表:
1.重命名组件类(VSCode Rename Symbol将更新所有引用)
<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']
})
这就足够了
Yes!
现在有了。
有一个扩展的VS Code为你做所有这些步骤。它叫做重命名Angular组件。
我希望将它移植到WebStorm和稍后的示意图。
以前,在VS Code中至少需要三个半自动步骤。这个扩展做所有这些。
我意识到这是在推广我自己的解决方案。但它是免费的、开源的,是完整的答案。如果它不能做你想要的所有事情,你可以在回购上发布问题,它会得到改进。
No!
没有任何命令会更改使用组件create命令生成的所有文件的名称。创建ts html css/scss。spec。ts 文件需要手动重命名/编辑。
我经常使用angular cli,我认为这是一个很好的命令,因为有时我们只是创建angular组件,需要重命名它们。由于没有这个重命名命令,删除已创建的angular组件、指令等,然后再次运行命令来创建该组件真的很痛苦。
下面是添加该特性的讨论链接
正如第一个答案所指出的,目前没有办法重命名组件,所以我们都只是在谈论变通办法! 这就是我所做的:
创建您喜欢的新组件。 生成组件newName 使用Visual studio代码编辑器或任何其他编辑器,然后方便地移动代码/块并排! 在Linux中,使用grep和sed (find & replace)来查找/替换引用。 Grep -ir "oldname" CD文件夹 sed -i 's/oldName/newName/g' * .使用实例
推荐文章
- 属性“of”在类型“typeof”的Observable上不存在
- 如何设置<iframe src="…">没有引起'不安全值'异常?
- 何时使用“npm start”,何时使用“ng serve”?
- Angular 5 -复制到剪贴板
- 错误:在switch上没有指定name属性的窗体控件的值访问器
- Angular 2 - innerHTML样式
- Angular 2显示和隐藏一个元素
- Angular 2中的“component”不是一个已知的元素
- 使用Java重命名文件
- 如何刷新一个数据源(mat-table)
- 如何在Angular中动态加载外部脚本?
- 可观察到的。的不是一个函数
- Angular 2模板中的let-*是什么?
- 在Angular2中,圆括号、方括号和星号有什么区别?
- 当组件属性依赖于当前日期时间时,如何管理Angular2“expression has changed after it was checked”异常