Verwendung von ngSwitch in Angular

Sie haben mindestens einmal switch-Anweisungen in allgemeinen Programmiersprachen gehört und verwendet.

Eine switch-Anweisung wird verwendet, um einen Codeblock auszuführen, wenn es viele if-Anweisungen gibt, und wir konvertieren diese if-Anweisungen in switch-Anweisungen, um Zeit zu sparen und effizienter zu arbeiten.

In diesem Tutorial werden wir ein Beispiel durchgehen, in dem wir ein Szenario erstellen, in dem die switch-Anweisung basierend auf dem Wochentag ausgeführt wird und einen bestimmten Codeblock für einen bestimmten Wochentag anzeigt.

So verwenden Sie den ngSwitch in Angular

Lassen Sie uns mit dem folgenden Befehl eine neue Anwendung erstellen.

# 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 greeting

In greeting.component.ts erstellen wir einen Tag, um den aktuellen Wochentag zu speichern.

# angular
day = new Date().getDay();

Wir erstellen eine switch-Anweisung, so dass, wenn der Tag 0 zurückgibt, es ein Sonntag ist und 1 Montag ist und so weiter. Wir werden also day mit [ngSwitch] binden und ngSwitchCase verwenden, um verschiedene Ansichten für jeden Tag in greeting.component.html anzuzeigen.

<h1>Hello! Good Morning</h1>

<div [ngSwitch]="day">
  <div *ngSwitchCase="0">Today is Sunday! Have a nice weekend</div>
  <div *ngSwitchCase="1"><h3>Today is Monday, Have a nice day</h3></div>
  <div *ngSwitchCase="2"><h3>Today is Tuesday, Have a nice day</h3></div>
  <div *ngSwitchCase="3"><h3>Today is Wednesday, Have a nice day</h3></div>
  <div *ngSwitchCase="4"><h3>Today is Thursday, Have a nice day</h3></div>
  <div *ngSwitchCase="5"><h3>Today is Friday, Have a nice day</h3></div>
  <div *ngSwitchCase="6"><h3>Today is Saturday, Have a nice weekend</h3></div>
  <div *ngSwitchDefault>Uh oh! Somethings wrong</div>
</div>

Ausgabe:

Das obige Beispiel zeigt, dass ngSwitch angezeigt hat, dass der Tag Samstag ist. Auf diese Weise können wir also mit ngSwitch und ngSwitchCase jeden beliebigen Codeblock basierend auf den Case-Szenarien anzeigen.

Demo hier