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


当前回答

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

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

其他回答

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

要在Angular中更改组件名称,你需要遵循以下步骤:

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

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

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

例如,如果你想将组件名称从my-old-component更改为my-new-component,你可以这样做:

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

export class MyOldComponent {
  ...
}

保存文件。 就是这样!你已经成功地修改了Angular中的组件名称。

请记住,您可能还需要在应用程序的其他部分(如模板或路由配置)中更新对组件的任何引用。

No!

没有任何命令会更改使用组件create命令生成的所有文件的名称。创建ts html css/scss。spec。ts 文件需要手动重命名/编辑。

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

下面是添加该特性的讨论链接

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

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中至少需要三个半自动步骤。这个扩展做所有这些。

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