Komponente in Angular löschen
Wir werden vorstellen, wie wir eine Komponente in Angular löschen können.
Komponente löschen in Angular
Wenn wir eine Webanwendung erstellen, die mehrere Komponenten enthält, kann es vorkommen, dass wir aus irgendeinem Grund eine Komponente löschen müssen.
Es ist ziemlich einfach, eine Komponente in Angular mit der Angular-CLI zu erstellen, aber es gibt keine Möglichkeit, eine Komponente mit der Angular-CLI zu löschen, also müssen wir sie manuell löschen.
Das Löschen einer Komponente ist nicht einfach, da es unsere Webanwendung zum Absturz bringen kann, wenn nicht alle Instanzen unserer Komponente korrekt entfernt werden.
Dieses Tutorial geht durch ein Beispiel, in dem wir eine Komponente mit Angular CLI erstellen und sie dann Schritt für Schritt löschen, damit Sie alle Schritte leichter verstehen und befolgen können.
Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.
# angular
ng new my-app
Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.
# angular
cd my-app
Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.
# angular
ng serve --open
Wir erstellen eine neue Komponente mit dem folgenden Befehl.
# angular
ng g c newcomponent
Sie sehen, dass im Ordner App ein neuer Ordner newcomponent erstellt wird, der die drei Dateien newcomponent.component.ts, newcomponent.component.html und newcomponent.component.css enthält. Lassen Sie uns nun besprechen, wie wir diese Komponente löschen können.
Befolgen Sie diese Schritte, um eine Komponente einfach und fehlerfrei in unserer Webanwendung zu löschen.
-
Löschen Sie den Ordner der Komponente
newcomponent, inklusive aller darin enthaltenen Dateien. -
Wenn Ihre Komponente keinen separaten Ordner hat, müssen Sie möglicherweise die Dateien löschen, die denselben Namen wie Ihre Komponente haben. In meinem Beispiel löschen wir 3 Dateien
newcomponent.component.ts,newcomponent.component.htmlundnewcomponent.component.css. -
Öffnen Sie
app.module.tsund löschen Sie, wo Ihre Komponente importiert wird, wie unten gezeigt.# angular import { NewComponent } from './newcomponent.component'; -
Löschen Sie nun die Deklaration der Komponente in
@NgModulewie unten gezeigt.# angular @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, NewComponent ], bootstrap: [ AppComponent ] })
Nachdem wir diese Schritte ausgeführt haben, können wir unsere Webanwendung mit dem folgenden Befehl starten.
# angular
ng build
ng serve
Es lädt unsere Webanwendung ohne Fehler. Wir können eine Komponente manuell und korrekt löschen, indem Sie diese einfachen und einfachen Schritte befolgen.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn