One place for hosting & domains

      verwenden

      Verwenden von ViewChild in Angular für den Zugriff auf eine untergeordnete Komponente, Anweisung oder ein DOM-Element


      Einführung

      Dieser Artikel stellt Ihnen den Dekorateur ViewChild von Angular vor.

      Es kann Situationen geben, in denen Sie aus einer übergeordneten Komponentenklasse auf eine Anweisung, eine untergeordnete Komponente oder ein DOM-Element zugreifen möchten. Der ViewChild -Decorator gibt das erste Element zurück, das einer bestimmten Anweisung, einer Komponente oder einem Auswahlelement für die Vorlagenreferenz entspricht.

      Verwenden von ViewChild mit Anweisungen

      ViewChild ermöglicht es, auf Anweisungen zuzugreifen.

      Nehmen wir an, wir haben eine SharkDirective.

      Im Idealfall verwenden Sie @angular/cli, um Ihre Anweisung zu generieren:

      • ng generate directive shark

      Andernfalls müssen Sie sie gegebenenfalls manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Unsere Anweisung sucht nach Elementen mit dem Attribut appShark und gibt den Text im Element mit dem Wort Shark vor:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Als Nächstes fügen wir Shark zu Fin hinzu, indem wir es in der Komponentenvorlage verwenden:

      app.component.html

      <span appShark>Fin!</span>
      

      Bei der Anzeige der Anweung in einem Browser wird es dargestellt als:

      Output

      Shark Fin!

      Jetzt können wir auf die Instanzvariable creature von SharkDirective zugreifen und eine Instanzvariable extraCreature mit ihrem Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Wir haben hier einen Setter verwendet, um die Variable extraCreature festzulegen. Beachten Sie, dass wir warten, bis der AfterViewInit-Lifecycle-Hook auf unsere Variable zugreift, da dann untergeordnete Komponenten und Anweisungen verfügbar werden.

      Wenn wir die Anwendung in einem Browser anzeigen, sehen wir immer noch das "Shark Fin!" („es hat funktioniert!“ ). Im Konsolenprotokoll wird es jedoch folgendermaßen angezeigt:

      Output

      Dolphin

      Die übergeordnete Komponente konnte aus der Anweisung auf den Wert zugreifen.

      Verwenden von ViewChild mit DOM-Elementen

      ViewChild ermöglicht es Ihnen, auf native DOM-Elemente zuzugreifen, die eine Vorlagenreferenzvariable haben.

      Nehmen wir an, wir haben ein <input> unserer Vorlage mit der Referenzvariable #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Jetzt können wir mit ViewChild auf das <input> zugreifen und den Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Wenn ngAfterViewInit ausgelöst wird, wird der Wert unseres <input> auf Folgendes gesetzt:

      Output

      Whale!

      Die übergeordnete Komponente konnte den Wert des untergeordneten DOM-Elements festlegen.

      Verwenden von ViewChild mit untergeordneten Komponenten

      ViewChild ermöglicht den Zugriff auf eine untergeordnete Komponente und den Aufruf von Methoden oder den Zugriff auf Instanzvariablen, die dem untergeordneten Element zur Verfügung stehen.

      Nehmen wir an, wir haben eine ChildComponent. Im Idealfall verwenden Sie @angular/cli, um Ihre Komponente zu generieren:

      • ng generate component child --flat

      Andernfalls müssen Sie child.component.css und child.component.html-Dateien erstellen und manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Wir fügen die whoAml-Methode zur ChildComponent hinzu, die eine Nachricht zurückgibt:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Nächstes referieren wir die Komponente in unserer App-Vorlage:

      app.component.html

      <app-child>child works!</app-child>
      

      Jetzt können wir die whoAmI-Methode aus unserer übergeordneten Komponenten-Klasse mit ViewChild wie folgt aufrufen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Bei der Betrachtung der Anwendung in einem Browser wird das Konsolenprotokoll angezeigt:

      Output

      I am a child component!

      Die übergeordnete Komponente konnte whoAmI-Methode der untergeordneten Komponente aufrufen.

      Zusammenfassung

      Sie haben gelernt, ViewChild für den Zugriff auf eine Anweisung, eine untergeordnete Komponente und ein DOM-Element aus einer übergeordneten Komponenten-Klasse zu verwenden.

      Wenn sich die Referenz dynamisch in ein neues Element ändert, aktualisiert ViewChild automatisch ihre Referenz.

      In Fällen, in denen Sie auf mehrere untergeordnete Komponenten zugreifen möchten, verwenden Sie stattdessen ViewChild.

      Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.



      Source link

      Verwenden von JSON.parse() und JSON.stringify()


      Einführung

      Das in allen modernen Browsern verfügbare JSON-Objekt verfügt über zwei nützliche Methoden, um mit JSON-formatierten Inhalten umzugehen: parse und stringify. JSON.parse() nimmt eine JSON-Zeichenfolge und transformiert sie in ein JavaScript-Objekt. JSON.stringify() verwendet ein JavaScript-Objekt und transformiert es in eine JSON-Zeichenfolge.

      Hier ist ein Beispiel:

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      Und obwohl die Methoden normalerweise bei Objekten verwendet werden, können sie auch bei Arrays verwendet werden:

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() kann eine Funktion als zweites Argument übernehmen, das die Objektwerte ändern kann, bevor sie zurückgegeben werden. Hier werden die Werte des Objekts im zurückgegebenen Objekt der Methode parse in Großbuchstaben transformiert:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      Hinweis: Nachkommas sind in JSON nicht gültig, sodass JSON.parse() eine Fehlermeldung auslöst, wenn die übergebene Zeichenfolge Nachkommas enthält.

      JSON.stringify()

      JSON.stringify() kann zwei zusätzliche Argumente annehmen, wobei das erste eine Ersatzfunktion und das zweite ein Zeichenfolgen– oder Zahlenwert ist, der als Leerzeichen in der zurückgegebenen Zeichenfolge zu verwenden ist.

      Die Ersatzfunktion kann zum Herausfiltern von Werten verwendet werden, da jeder als undefiniert zurückgegebene Wert aus der zurückgegebenen Zeichenfolge herausfällt:

      const user = {
        id: 229,
        name: 'Sammy',
        email: 'Sammy@domain.com'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      Und ein Beispiel mit einem eingefügten Raum-Argument:

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "Sammy@domain.com",
      // ..."plan": "Pro"
      // }"
      

      Zusammenfassung

      In diesem Tutorial haben Sie untersucht, wie die Methoden JSON.parse() und JSON.stringify() verwendet werden.  Wenn Sie mehr über die Arbeit mit JSON in Javascript erfahren möchten, lesen Sie unser Tutorial Wie man mit JSON in JavaScript arbeitet.

      Weitere Informationen zum Kodieren in JavaScript finden Sie in unserer Reihe Wie man in JavaScript kodiert oder sehen Sie sich unsere JavaScript-Seite Übungen und Programmierprojekte an.



      Source link

      Verwenden der Git-Integration in Visual Studio Code


      Einführung

      Visual Studio Code (VS-Code) hat sich zu einem der beliebtesten Editoren für die Webentwicklung entwickelt. Dank seiner vielen integrierten Funktionen wie der Integration der Quellcodeverwaltung, insbesondere mit Git, hat er eine solche Popularität erlangt. Die Nutzung der Leistungsfähigkeit von Git innerhalb von VS-Code kann Ihren Workflow effizienter und robuster machen.

      In diesem Tutorial erkunden Sie die Verwendung der Quellcodeverwaltungs-Integration in VS-Code mit Git.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Schritt 1 — Vertrautmachen mit der Registerkarte Quellcodeverwaltung

      Was Sie zuerst tun müssen, um die Vorteile der Quellcodeverwaltung-Integration zu nutzen, ist die Initialisierung eines Projekts als Git-Repository.

      Öffnen Sie Visual Studio Code und greifen Sie auf das integrierte Terminal zu. Sie können dies durch Verwendung der Tastenkombination STRG+` unter Linux, macOS oder Windows öffnen.

      Erstellen Sie in Ihrem Terminal ein Verzeichnis für ein neues Projekt und wechseln Sie in dieses Verzeichnis:

      • mkdir git_test
      • cd git_test

      Erstellen Sie dann Git-Repository:

      Eine weitere Möglichkeit, dies mit Visual Studio Code zu bewerkstelligen, ist das Öffnen der Registerkarte Quellcodeverwaltung (das Symbol sieht aus wie eine Straßenverzweigung) im linken Bereich:

      Symbol für Quellcodeverwaltung

      Wählen Sie als Nächstes Open Folder (Ordner öffnen):

      Screenshot mit der Schaltfläche „Ordner öffnen“

      Dadurch wird Ihr Datei-Explorer für das aktuelle Verzeichnis geöffnet. Wählen Sie das bevorzugte Projektverzeichnis und klicken Sie auf Open (Öffnen).

      Wählen Sie dann Initialize Repository (Repository initialisieren):

      Screenshot, der die Schaltfläche „Repository initialisieren“ zeigt

      Wenn Sie nun Ihr Dateisystem überprüfen, sehen Sie, dass es ein Verzeichnis .git enthält. Verwenden Sie dazu das Terminal, um zu Ihrem Projektverzeichnis zu navigieren und alle Inhalte aufzulisten:

      Sie sehen das erstellte Verzeichnis .git:

      Output

      Nachdem das Repository nun initialisiert wurde, fügen Sie eine Datei namens index.html hinzu.

      Nachdem Sie dies getan haben, sehen Sie im Fenster Source Control (Quellcodeverwaltung), dass Ihre neue Datei mit dem Buchstaben U daneben angezeigt wird. U steht für unverfolgte Datei, d. h. eine Datei, die neu ist oder geändert wurde, aber dem Repository noch nicht hinzugefügt wurde:

      Screenshot einer unverfolgten Datei mit dem Buchstaben U-Indikator

      Sie können jetzt auf das Plus-Symbol (+) neben der Auflistung der Datei index.html klicken, um die Datei nach dem Repository zu verfolgen.

      Sobald die Datei hinzugefügt wurde, ändert sich der Buchstabe neben der Datei an eine A. A steht für eine neue Datei, die dem Repository hinzugefügt wurde.

      Um Ihre Änderungen zu übergeben, geben Sie eine Übergabe-Nachricht in das Eingabefeld oben im Fenster Source Control (Quellcodeverwaltung) ein. Klicken Sie dann auf das Prüfsymbol, um die Übergabe auszuführen.

      Screenshot einer hinzugefügten Datei mit dem Buchstabe-A-Indikator und der Übergabenachricht

      Danach werden Sie feststellen, dass keine Änderungen ausstehen.

      Fügen Sie als Nächstes Ihrer Datei index.html etwas Inhalt hinzu.

      Sie können eine Emmet-Verknüpfung verwenden, um ein HTML5-Skelett in VS-Code zu generieren, indem Sie die Taste ! drücken, gefolgt von der Taste Tab. Fahren Sie fort und fügen Sie dem <body> etwas wie eine Überschrift <h1> hinzu, und speichern Sie anschließend.

      Im Fenster Quellcodeverwaltung sehen Sie, dass Ihre Datei geändert wurde. Daneben wird der Buchstabe M angezeigt, der für eine modifizierte Datei steht:

      Screenshot der geänderten Datei mit dem Buchstabe-M-Indikator

      Zur Übung sollten Sie auch diese Änderung übergeben.

      Nachdem Sie nun mit der Bedienung des Quellcodeverwaltungsfensters vertraut sind, fahren Sie mit der Interpretation der „Gutter“-Indikatoren fort.

      Schritt 2 — Interpretation der Gutter-Indikatoren

      In diesem Schritt werfen Sie einen Blick auf das sogenannte „Gutter“ in VS-Code. Das Gutter ist der schmale Bereich rechts neben der Zeilennummer.

      Wenn Sie zuvor Code-Folding verwendet haben, befinden sich die Symbole für Maximieren und Minimieren im Gutter.

      Beginnen wir damit, eine kleine an Ihrer Datei index.html vorzunehmen, beispielsweise eine Änderung des Inhalts innerhalb des Tags <h1>. Danach werden Sie eine blaue vertikale Markierung im Gutter der Zeile, die Sie geändert haben, bemerken. Die vertikale blaue Markierung bedeutet, dass die entsprechende Codezeile geändert wurde.

      Versuchen Sie nun, eine Codezeile zu löschen. Sie können eine der Zeilen im Abschnitt <body> Ihrer Datei index.html löschen. Beachten Sie, dass im Gutter nun ein rotes Dreieck vorhanden ist. Das rote Dreieck kennzeichnet eine Zeile oder eine Gruppe von Zeilen, die gelöscht.

      Fügen Sie schließlich am Ende Ihres Abschnitts <body> eine neue Codezeile hinzu und beachten Sie den grünen Balken. Der vertikale grüne Balken steht für eine hinzugefügte Codezeile.

      Dieses Beispiel zeigt Gutter-Indikatoren für eine geänderte Zeile, eine entfernte Zeile und eine neue Zeile:

      Screenshot mit Beispielen der drei Arten von Gutter-Indikatoren

      Schritt 3 — Vergleichen von Dateien

      VS-Code bietet auch die Möglichkeit, einen Vergleich mit einer Datei auszuführen. Normalerweise müssten Sie dafür ein separates Diff-Tool herunterladen, sodass diese integrierte Funktion Ihnen dabei helfen kann, effizienter zu arbeiten.

      Um einen Vergleich anzuzeigen, öffnen Sie das Quellcodeverwaltungsfenster und doppelklicken Sie auf eine geänderte Datei. Doppelklicken Sie in diesem Fall auf die Datei index.html. Sie werden zu einer typischen Diff-Ansicht mit der aktuellen Version der Datei auf der linken und der zuvor übergebenen Version der Datei auf der rechten Seite gebracht.

      Dieses Beispiel zeigt, dass in der aktuellen Version eine Zeile hinzugefügt wurde:

      Screenshot mit einem Beispiel einer geteilten Bildschirmanzeige eines Vergleichs

      Schritt 4 — Arbeiten mit Zweigen

      In der unteren Leiste haben Sie die Möglichkeit, Zweige zu erstellen und zu wechseln. Wenn Sie einen Blick auf die unterste linke Ecke des Editors werfen, sollten Sie das Quellcodeverwaltungs-Symbol sehen (dasjenige, das wie eine Weggabelung aussieht), gefolgt höchstwahrscheinlich von master oder dem Namen des aktuellen Arbeitszweigs.

      Zweigindikator in der unteren Leiste von VS-Code mit der Anzeige „master“

      Um einen Zweig zu erstellen, klicken Sie auf diesen Zweignamen. Es sollte sich ein Menü öffnen, das Ihnen die Möglichkeit gibt, einen neuen Zweig zu erstellen:

      Eingabeaufforderung zur Erstellung eines neuen Zweigs

      Fahren Sie fort und erstellen Sie einen neuen Zweig namens test.

      Nehmen Sie nun eine Änderung an Ihrer Datei index.html vor, die anzeigt, dass Sie sich in dem neuen Zweig test befinden, indem Sie beispielsweise den Text „this is the new test branch“ (Dies ist der neue Testzweig) hinzufügen.

      Übergeben Sie diese Änderungen an den Zweig test. Klicken Sie dann erneut auf den Zweignamen unten links, um wieder zu dem Zweig master zu wechseln.

      Nach dem Wechsel zum Zweig master werden Sie feststellen, dass der Text this is the new test branch (Dies ist der neue Testzweig), der dem Zeig test übergeben wurde, nicht mehr vorhanden ist.

      Schritt 5 — Arbeiten mit Remote-Repositorys

      In diesem Tutorial wird nicht im Detail darauf eingegangen, aber über das Quellcodeverwaltungsfenster haben Sie Zugriff auf die Arbeit mit Remote-Repositorys. Wenn Sie schon mit einem Remote-Repository gearbeitet haben, werden Ihnen vertraute Befehle wie pull, sync, publish, stash usw. auffallen.

      Schritt 6 — Installieren nützlicher Erweiterungen

      VS-Code enthält nicht nur viele integrierte Funktionen für Git, es gibt auch einige sehr beliebte Erweiterungen, um zusätzliche Funktionalität hinzuzufügen.

      Git Blame

      Diese Erweiterung bietet die Möglichkeit, Git Blame-Informationen in der Statusleiste für die aktuell ausgewählte Zeile anzuzeigen.

      Dies kann einschüchternd klingen, aber keine Sorge, bei der Erweiterung „Git Blame“ geht es viel mehr um Praktikabilität als darum, jemandem ein schlechtes Gewissen einzureden. Bei der Idee, jemandem „ein schlechtes Gewissen“ für eine Code-Änderung einzureden geht es weniger darum, diese Person zu beschämen, als vielmehr darum, die richtige Person zu finden, der man Fragen zu bestimmten Teilen des Codes stellen kann.

      Wie Sie auf dem Screenshot sehen können, bietet diese Erweiterung in der unteren Symbolleiste eine subtile, auf die aktuelle Codezeile, die Sie gerade bearbeiten, bezogene Nachricht, die erklärt, wer die Änderung vorgenommen hat und wann sie vorgenommen wurde.

      Git Blame in der unteren Symbolleiste

      Git History

      Obwohl Sie mit den integrierten Funktionen in VS-Code aktuelle Änderungen anzeigen, Vergleiche durchführen und Zweige verwalten können, bietet es keinen detaillierten Einblick in Ihren Git-Verlauf. Die Erweiterung Git History löst dieses Problem.

      Wie Sie in der nachstehenden Abbildung sehen können, ermöglicht diese Erweiterung Ihnen, den Verlauf einer Datei, eines bestimmten Autors, eines Zweigs usw. sorgfältig zu untersuchen. Um das nachstehende Fenster „Git History“ zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Datei und wählen Sie Git: View File History:

      Ergebnisse der Erweiterung „Git History“

      Zusätzlich können Sie Zweige und Übergaben vergleichen, Zweige aus Übergaben erstellen und vieles mehr.

      Git Lens

      Git Lens erweitert die in Visual Studio Code integrierten Git-Funktionen. Es hilft Ihnen, die Code-Autorenschaft auf einen Blick mittels Git Blame-Annotationen und Code Lens zu visualisieren, nahtlos durch Git-Repositorys zu navigieren und diese zu erkunden, wertvolle Erkenntnisse über leistungsstarke Vergleichsbefehle zu gewinnen und vieles mehr.

      Die Erweiterung „Git Lens“ ist eine der beliebtesten in der Gemeinschaft und ist auch die leistungsstärkste. In den meisten Fällen kann sie mit ihrer Funktionalität jede der beiden vorherigen Erweiterungen ersetzen.

      Für „Blame“-Informationen erscheint rechts neben der Zeile, an der Sie gerade arbeiten, eine subtile Nachricht, die Sie darüber informiert, werde die Änderung vorgenommen hat, wann sie vorgenommen wurde und die zugehörige Übergabemeldung. Es gibt einige zusätzliche Informationen, die angezeigt werden, wenn Sie mit der Maus über diese Nachricht fahren, wie die Code-Änderung selbst, der Zeitstempel und mehr.

      Git Blame-Funktionalität in Git Lens

      Für Git-Verlaufsinformationen bietet diese Erweiterung eine Vielzahl von Funktionen. Sie haben einfachen Zugriff auf zahlreiche Optionen, darunter die Anzeige des Dateiverlaufs, die Durchführung von Vergleichen mit vorherigen Versionen, das Öffnen einer bestimmten Revision und vieles mehr. Um diese Optionen zu öffnen, können Sie auf den Text in der unteren Statusleiste klicken, der den Autor enthält, der die Codezeile bearbeitet hat und wie lange es her ist, dass sie bearbeitet wurde.

      Dadurch wird das folgende Fenster geöffnet:

      Git History-Funktionalität in Git Lens

      Diese Erweiterung ist vollgepackt mit Funktionalität und es wird eine Weile dauern, bis Sie alles, was sie zu bieten hat, aufgenommen haben.

      Zusammenfassung

      In diesem Tutorial haben Sie erkundet, wie die Integration der Quellcodeverwaltung mit VS-Code verwendet wird. VS-Code kann mit vielen Funktionen umgehen, für die zuvor ein separates Tool heruntergeladen werden musste.



      Source link