Is er een snelkoppeling om een component te hernoemen met de Angular CLI, behalve het handmatig bewerken van alle componentbestanden, zoals mapnaam, .css, .ts, spec.ts en app.module.ts?
Antwoord 1, autoriteit 100%
Nee!
Er is geen commando dat de naam verandert van alle bestanden die zijn gegenereerd met het commando component create. Dus gemaakt ts, html, css/scss, .spec.ts
bestanden moeten handmatig worden hernoemd/bewerkt.
Ik ben een frequente gebruiker van angular clien ik denk dat dit een leuk commando zou zijn, aangezien we soms alleen maar hoekige componenten maken en ze moeten hernoemen. Omdat dit hernoemingscommando er niet is, is het erg lastig om de gemaakte hoekcomponent, richtlijn, enz. te verwijderen en opnieuw de opdracht uit te voeren om de component te maken.
Hier is de discussielink om deze functie toe te voegen de naam van de hoekige component wijzigen
Antwoord 2, autoriteit 25%
Momenteel ondersteunt Angular CLI de functie voor het hernoemen of herstructureren van code niet.
Je kunt dergelijke functionaliteit bereiken met behulp van een IDE.
Intellij, Eclipse, VSCode etc.. ondersteunen standaard de refactoring.
Vandaag de dag vertoont VSCode een opwaartse trend, persoonlijk ben ik hier een fan van
Refactoring met VSCode
Bepalende referentie: –
VS Code helpt je bij het vinden van alle referenties van een variabele door een variabele te selecteren en op de sneltoets SHIFT+ F12te drukken. Dit werkt ongelooflijk goed met Type Script.
De naam van alle verwijzingen wijzigen:-
Nadat je alle referenties hebt gevonden, kun je op F2drukken. Er verschijnt een pop-up en je kunt de waarde wijzigen en op enter klikken om alle referentie-instanties bij te werken.
Bestanden hernoemen en importeren
U kunt een bestand en zijn importreferenties hernoemen met een plug-in. Meer details vindt u hier
Met bovenstaande stappen na het hernoemen van de variabelen en bestanden kunt u de hoekige component hernoemen.
Antwoord 3, autoriteit 4%
Hier is een checklistdie ik gebruik om een component te hernoemen:
1.Hernoem de componentklasse (VSCode Hernoem symboolzal alle referenties bijwerken)
<Old Name>Component => <New Name>Component
2.Rename @Component selector samen met referenties (gebruik VSCode’s 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.De naam van de componentmap wijzigen (bij het hernoemen van de map in VSCode, worden de referenties in de module en andere componenten bijgewerkt)
src\app\<module>\<old-name> => src\app\<module>\<new-name>
4.De naam van componentbestanden wijzigen (handmatighernoemen is het snelst, maar u kunt ook een terminal gebruiken om alles tegelijk te hernoemen)
<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.Vervang bestandsverwijzingen in @Component (gebruik Replace in Filesvan 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']
})
Dat moet voldoende zijn
4, Autoriteit 2%
Hoewel de OP vraagt om een CLI-commando, een deel van de antwoorden richten zich op de IDE. In dit antwoord ik bevestigen, dat de huidige WebStorm / IntelliJ niet toestaat het hernoemen van de component. Het enige dat gedaan moet worden is een poging om de klas te hernoemen in de .tsbestand. U zal worden gepresenteerd met:
en het hernoemen zal worden uitgevoerd in alle relevante plaatsen.
5, Autoriteit 2%
Ja!
Nu die er is.
Er is een uitbreiding voor VS Code om al deze stappen voor u doen. Het heet Rename Angular Component .
Ik heb de hoop porten naar WebStorm en een Schematische later.
Voorheen duurde minstens drie semi-geautomatiseerde stappen in VS Code minimaal. Deze extensie doet al van hen.
Ik besef dat dit is het bevorderen van mijn eigen oplossing. Maar het is gratis, open source, en het volledige antwoord. Als het niet alles wat u op zoek bent naar doet, kunt u problemen plaatsen op de repo, en het zal worden verbeterd.
6
In WebStorm, kunt u met de rechtermuisknop op → Refactor → Naam wijzigen op de naam van de component in het bestand typoscript en het zal de naam overal te wijzigen.
7
Als u VS Code , kunt u de naam van de .ts, .html, .css/.scss, .spec.tsbestanden en de IDE zal nemen zorg van de invoer voor u. Daarom zullen er geen klachten van de bestanden die importeren van bestanden van uw component (zoals app.module.ts). Maar, zult u nog steeds de component naam hernoemen overal waar het wordt gebruikt.
8
de naam van de bestanden die en onderdelen, als je normaal zou denken, start ng serve. Gemakkelijk peasy.
Naam wijzigen van de bestanden, paden en gevonden. Het belangrijkste is dat je je loopt server te sluiten en opnieuw te starten nadat alles is hernoemd.
9
Er is nog geen rename cli commando. Maar de makkelijkste manier die ik heb gevonden om dit probleem op te lossen is om een nieuwe component op de cli genereren en de inhoud kopiëren naar de nieuwe component.
Verwijder vervolgens de oorspronkelijke component en je zal één fout hebben voor elke plek in uw code base, waar je nodig hebt om de naam van de nieuwe component naam. Zodra alle fouten worden aangepakt je bent klaar! 🙂
PS:. Ook moet je de verklaringen invoer te verwijderen voor de oude component