除了手动编辑所有组件文件(如文件夹名、.css、.ts、spec.ts和app.module.ts)之外,在Angular CLI中有没有什么重命名组件的快捷方式?
当前回答
我个人还没有找到任何同样的命令。只需创建一个新组件(重命名名称)并复制粘贴前一个组件的html, css和ts。在ts中,显然类名将被替换。这是最安全的方法,但需要一点时间。
其他回答
就像你通常认为的那样重命名文件和组件,然后重新启动ng serve。容易peasy。
重命名文件、路径和引用。关键是您必须关闭正在运行的服务器,并在重命名所有内容后重新启动它。
下面是我用来重命名组件的检查表:
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']
})
这就足够了
我个人还没有找到任何同样的命令。只需创建一个新组件(重命名名称)并复制粘贴前一个组件的html, css和ts。在ts中,显然类名将被替换。这是最安全的方法,但需要一点时间。
目前,Angular CLI不支持重命名或重构代码的特性。
您可以在一些IDE的帮助下实现这样的功能。
Intellij, Eclipse, VSCode等。默认支持重构。
现在VSCode呈现出一些上升趋势,我个人是它的粉丝
用VSCode重构
确定基准:- VS Code帮助你通过选择变量并按快捷键SHIFT + F12来查找变量的所有引用。这与类型脚本一起工作得非常好。
重命名所有引用实例:- 找到所有的引用后,你可以按F2将打开一个弹出窗口,你可以改变的值,并按enter,这将更新引用的所有实例。
重命名文件和导入 您可以使用插件重命名文件及其导入引用。更多细节可以在这里找到
通过上述步骤,在重命名变量和文件后,您可以实现角组件的重命名。
在WebStorm中,你可以右键点击TypeScript文件中组件的名称→重构→重命名,它会在任何地方更改名称。
推荐文章
- 检查已安装的angular-cli版本?
- Angular:如何在不改变路由的情况下更新queryParams
- 当我通过浏览器刷新时,会出现Angular 2: 404错误
- Angular中的Subject vs behaviour Subject vs ReplaySubject
- Angular 2单元测试:找不到名称“describe”
- 如何在Linux下将所有文件夹和文件重命名为小写?
- SystemJS和Webpack有什么不同?
- 如何在Angular中显示应用版本?
- 运行单个测试文件
- NG6002:出现在NgModule中。导入AppModule类,但不能解析为NgModule类
- 向Angular HttpClient添加一个HTTP头并不会发送这个头,为什么?
- 不能绑定到'ngForOf',因为它不是'tr'的已知属性(最终版本)
- Angular中的全局事件
- Angular和Typescript:不能找到名字——错误:不能找到名字
- HttpModule和HttpClientModule的区别