One place for hosting & domains

      So sichern, wiederherstellen und migrieren Sie eine MongoDB-Datenbank unter Ubuntu 20.04


      Der Autor hat den COVID-19 Relief Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      MongoDB ist eine der beliebtesten NoSQL-Datenbank-Engines. Es ist bekannt für seine Skalierbarkeit, Robustheit, Zuverlässigkeit und Benutzerfreundlichkeit. In diesem Artikel werden Sie eine Beispiel-MongoDB-Datenbank sichern, wiederherstellen und migrieren.

      Beim Importieren und Exportieren einer Datenbank werden Daten in einem für Menschen lesbaren Format verarbeitet, das mit anderen Softwareprodukten kompatibel ist. Im Gegensatz dazu erstellen oder verwenden die Sicherungs- und Wiederherstellungsvorgänge von MongoDB MongoDB-spezifische Binärdaten, wodurch nicht nur die Konsistenz und Integrität Ihrer Daten, sondern auch die spezifischen MongoDB-Attribute erhalten bleiben. Daher ist es für die Migration normalerweise vorzuziehen, Backup und Wiederherstellung zu verwenden, solange das Quell- und das Zielsystem kompatibel sind.

      Voraussetzungen

      Bevor Sie diesem Tutorial folgen, stellen Sie bitte sicher, dass Sie die folgenden Voraussetzungen erfüllen:

      Sofern nicht anders angegeben, sollten alle Befehle, für die in diesem Tutorial-Root-Berechtigungen erforderlich sind, als Nicht-Root-Benutzer mit Sudo-Berechtigungen ausgeführt werden.

      Schritt 1 — Verwenden von JSON und BSON in MongoDB

      Bevor Sie mit diesem Artikel fortfahren, ist ein grundlegendes Verständnis der Angelegenheit erforderlich. Wenn Sie Erfahrung mit anderen NoSQL-Datenbanksystemen wie Redis haben, können Sie bei der Arbeit mit MongoDB einige Ähnlichkeiten feststellen.

      MongoDB verwendet die Formate JSON und BSON (binäres JSON) zum Speichern seiner Informationen. JSON ist das für Menschen lesbare Format, das sich perfekt zum Exportieren und eventuell zum Importieren Ihrer Daten eignet. Sie können Ihre exportierten Daten mit jedem Tool, das JSON unterstützt, einschließlich eines einfachen Texteditors, weiter verwalten.

      Ein Beispiel-JSON-Dokument sieht folgendermaßen aus:

      Example of JSON Format

      {"address":[
          {"building":"1007", "street":"Park Ave"},
          {"building":"1008", "street":"New Ave"},
      ]}
      

      JSON ist zum Arbeiten praktisch, unterstützt jedoch nicht alle in BSON verfügbaren Datentypen. Dies bedeutet, dass es bei Verwendung von JSON zu einem sogenannten „Verlust der Wiedergabetreue“ der Informationen kommt. Zum Sichern und Wiederherstellen ist es besser, das binäre BSON zu verwenden.

      Zweitens müssen Sie sich nicht um die explizite Erstellung einer MongoDB-Datenbank kümmern. Wenn die für den Import angegebene Datenbank noch nicht vorhanden ist, wird sie automatisch erstellt. Noch besser ist die Struktur der Sammlungen (Datenbanktabellen). Im Gegensatz zu anderen Datenbank-Engines wird in MongoDB die Struktur beim Einfügen des ersten Dokuments (Datenbankzeile) automatisch neu erstellt.

      Drittens kann das Lesen oder Einfügen großer Datenmengen, wie z. B. die Aufgaben dieses Artikels, in MongoDB ressourcenintensiv sein und einen Großteil Ihrer CPU, Ihres Arbeitsspeichers und Ihres Speicherplatzes beanspruchen. Dies ist entscheidend, da MongoDB häufig für große Datenbanken und Big Data verwendet wird. Die einfachste Lösung für dieses Problem besteht darin, die Exporte und Sicherungen während der Nacht oder außerhalb der Stoßzeiten auszuführen.

      Viertens kann die Informationskonsistenz problematisch sein, wenn Sie einen ausgelasteten MongoDB-Server haben, auf dem sich die Informationen während des Datenbankexports oder -sicherungsprozesses ändern. Eine mögliche Lösung für dieses Problem ist die Replikation, die Sie möglicherweise in Betracht ziehen, wenn Sie mit dem Thema MongoDB fortfahren.

      Während Sie die Import- und Exportfunktionen zum Sichern und Wiederherstellen Ihrer Daten verwenden können, gibt es bessere Möglichkeiten, um die vollständige Integrität Ihrer MongoDB-Datenbanken sicherzustellen. Um Ihre Daten zu sichern, sollten Sie den Befehl mongodump verwenden. Zum Wiederherstellen verwenden Sie mongorestore. Sehen wir uns an, wie sie funktionieren.

      Schritt 2 – Verwenden von mongodump zum Sichern einer MongoDB-Datenbank

      Lassen Sie uns zuerst das Sichern Ihrer MongoDB-Datenbank behandeln.

      Ein wesentliches Argument für mongodump ist --db, das den Namen der Datenbank angibt, die Sie sichern möchten. Wenn Sie keinen Datenbanknamen angeben, sichert mongodump alle Ihre Datenbanken. Das zweite wichtige Argument ist --out, das das Verzeichnis definiert, in das die Daten gespeichert werden. Lassen Sie uns beispielsweise die newdb-Datenbank sichern und im Verzeichnis /var/backups/mongobackups speichern. Im Idealfall haben wir jedes unserer Backups in einem Verzeichnis mit dem aktuellen Datum wie /var/backups/mongobackups/10-29-20.

      Erstellen Sie zuerst dieses Verzeichnis /var/backups/mongobackups:

      • sudo mkdir /var/backups/mongobackups

      Führen Sie dann mongodump aus:

      • sudo mongodump --db newdb --out /var/backups/mongobackups/`date +"%m-%d-%y"`

      Sie werden eine Ausgabe wie diese sehen:

      Output

      2020-10-29T19:22:36.886+0000 writing newdb.restaurants to 2020-10-29T19:22:36.969+0000 done dumping newdb.restaurants (25359 documents)

      Beachten Sie, dass wir im obigen Verzeichnispfad das Datum + „%m-%d-%y“ verwendet haben, das automatisch das aktuelle Datum abruft. Auf diese Weise können wir Backups im Verzeichnis wie /var/backups/10-29-20/ erstellen. Dies ist besonders praktisch, wenn wir die Backups automatisieren.

      An diesem Punkt verfügen Sie über eine vollständige Sicherung der newdb-Datenbank im Verzeichnis /var/backups/mongobackups/10-29-20/newdb/. Dieses Backup verfügt über alles, um newdb richtig zu restaurieren und ihre sogenannte „Treue“ zu erhalten.

      In der Regel sollten Sie regelmäßige Sicherungen durchführen, vorzugsweise wenn der Server am wenigsten ausgelastet ist. Auf diese Weise können Sie den Befehl mongodump als Cron-Job festlegen, sodass er regelmäßig ausgeführt wird, z. B. jeden Tag um 03:03 Uhr.

      Um dies zu erreichen, öffnen Sie Crontab, Cron’s Editor:

      Beachten Sie, dass Sie beim Ausführen von sudo crontab die Cron-Jobs für den Root-Benutzer bearbeiten. Dies wird empfohlen, da die Crons für Ihren Benutzer möglicherweise nicht ordnungsgemäß ausgeführt werden, insbesondere wenn für Ihr Sudo-Profil eine Passwortüberprüfung erforderlich ist.

      Fügen Sie in die Crontab-Eingabeaufforderung den folgenden mongodump-Befehl ein:

      crontab

      3 3 * * * mongodump --out /var/backups/mongobackups/`date +"%m-%d-%y"`
      

      Im obigen Befehl lassen wir das Argument --db absichtlich weg, da Sie typischerweise alle Ihre Datenbanken gesichert werden möchten.

      Abhängig von Ihrer MongoDB-Datenbankgröße wird Ihnen möglicherweise bald der Speicherplatz mit zu vielen Backups ausgehen. Aus diesem Grund wird auch empfohlen, die alten Backups regelmäßig zu bereinigen oder zu komprimieren.

      Um beispielsweise alle Backups zu löschen, die älter als sieben Tage sind, können Sie den folgenden Bash-Befehl verwenden:

      • find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;

      Ähnlich wie beim vorherigen mongodump-Befehl können Sie diesen auch als Cron-Job hinzufügen. Er sollte kurz vor dem Start des nächsten Backups ausgeführt werden, z. B. um 03:01 Uhr. Öffnen Sie zu diesem Zweck crontab erneut:

      Fügen Sie danach die folgende Zeile ein:

      crontab

      1 3 * * * find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;
      

      Speichern und schließen Sie die Datei.

      Wenn Sie alle Aufgaben in diesem Schritt ausführen, wird eine ordnungsgemäße Backup-Lösung für Ihre MongoDB-Datenbanken sichergestellt.

      Schritt 3 – Verwenden von mongorestore zum Wiederherstellen und Migrieren einer MongoDB-Datenbank

      Wenn Sie Ihre MongoDB-Datenbank aus einem früheren Backup wiederherstellen, wird die genaue Kopie Ihrer MongoDB-Informationen zu einem bestimmten Zeitpunkt erstellt, einschließlich aller Indizes und Datentypen. Dies ist besonders nützlich, wenn Sie Ihre MongoDB-Datenbanken migrieren möchten. Zum Wiederherstellen von MongoDB verwenden wir den Befehl mongorestore, der mit den binären Backups funktioniert, die mongodump produziert.

      Lassen Sie uns unsere Beispiele mit der newdb-Datenbank fortsetzen und sehen, wie wir sie aus dem zuvor erstellten Backup wiederherstellen können. Wir geben zuerst den Namen der Datenbank mit dem Argument --nsInclude an. Wir verwenden newdb.* zum Wiederherstellen aller Sammlungen. Um eine einzelne Sammlung wie Restaurants wiederherzustellen, verwenden Sie stattdessen newdb.restaurants.

      Wenn wir dann --drop verwenden, stellen wir sicher, dass die Zieldatenbank zuerst weggelassen wird, sodass das Backup in einer sauberen Datenbank wiederhergestellt wird. Als letztes Argument geben wir das Verzeichnis des letzten Backups an, das in etwa so aussieht: /var/backups/mongobackups/10-29-20/newdb/.

      Sobald Sie ein zeitgestempeltes Backup haben, können Sie dieses mit folgendem Befehl wiederherstellen:

      • sudo mongorestore --db newdb --drop /var/backups/mongobackups/10-29-20/newdb/

      Sie werden eine Ausgabe wie diese sehen:

      Output

      2020-10-29T19:25:45.825+0000 the --db and --collection args should only be used when restoring from a BSON file. Other uses are deprecated and will not exist in the future; use --nsInclude instead 2020-10-29T19:25:45.826+0000 building a list of collections to restore from /var/backups/mongobackups/10-29-20/newdb dir 2020-10-29T19:25:45.829+0000 reading metadata for newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.metadata.json 2020-10-29T19:25:45.834+0000 restoring newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.bson 2020-10-29T19:25:46.130+0000 no indexes to restore 2020-10-29T19:25:46.130+0000 finished restoring newdb.restaurants (25359 documents) 2020-10-29T19:25:46.130+0000 done

      Im obigen Fall stellen wir die Daten auf demselben Server wieder her, auf dem wir das Backup erstellt haben. Wenn Sie die Daten auf einen anderen Server migrieren und dieselbe Technik verwenden möchten, sollten Sie das Backup-Verzeichnis, in unserem Fall /var/backups/mongobackups/10-29-20/newdb/, auf den anderen Server kopieren.

      Zusammenfassung

      Sie haben jetzt einige wichtige Aufgaben im Zusammenhang mit dem Sichern, Wiederherstellen und Migrieren Ihrer MongoDB-Datenbanken ausgeführt. Kein Produktions-MongoDB-Server sollte jemals ohne eine zuverlässige Backup-Strategie wie die hier beschriebene ausgeführt werden.



      Source link

      So importieren und exportieren Sie eine MongoDB-Datenbank unter Ubuntu 20.04


      Der Autor hat den COVID-19 Relief Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      MongoDB ist eine der beliebtesten NoSQL-Datenbank-Engines. Es ist berühmt für seine Skalierbarkeit, Leistung, Zuverlässigkeit und Benutzerfreundlichkeit. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre MongoDB-Datenbanken importieren und exportieren.

      Wir sollten klarstellen, dass unter Import und Export diejenigen Vorgänge zu verstehen sind, die Daten in einem für Menschen lesbaren Format verarbeiten, das mit anderen Softwareprodukten kompatibel ist. Im Gegensatz dazu erstellen oder verwenden die Sicherungs- und Wiederherstellungsvorgänge MongoDB-spezifische Binärdaten, wodurch die Konsistenz und Integrität Ihrer Daten sowie deren spezifische MongoDB-Attribute erhalten bleiben. Daher ist es für die Migration normalerweise vorzuziehen, Backup und Wiederherstellung zu verwenden, solange das Quell- und das Zielsystem kompatibel sind.

      Backup-, Wiederherstellungs- und Migrationsaufgaben gehen über den Rahmen dieses Artikels hinaus. Weitere Informationen finden Sie unter So sichern Sie eine MongoDB-Datenbank unter Ubuntu 20.04.

      Voraussetzungen

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

      Schritt 1 — Importieren von Informationen in MongoDB

      Um zu erfahren, wie Informationen in MongoDB importiert werden, verwenden wir eine beliebte Beispiel-MongoDB-Datenbank über Restaurants. Sie ist im .json-Format und kann mit wget wie folgt heruntergeladen werden:

      • wget https://raw.githubusercontent.com/mongodb/docs-assets/primer-dataset/primer-dataset.json

      Sobald der Download abgeschlossen ist, sollten Sie eine Datei mit dem Namen primer-dataset.json (12 MB Größe) im aktuellen Verzeichnis haben. Importieren wir die Daten aus dieser Datei in eine neue Datenbank namens newdb und in eine Sammlung mit dem Namen Restaurants.

      Verwenden Sie den Befehl mongoimport wie folgt:

      • sudo mongoimport --db newdb --collection restaurants --file primer-dataset.json

      Das Ergebnis sieht folgendermaßen aus:

      Output

      2020-11-11T19:37:55.607+0000 connected to: mongodb://localhost/ 2020-11-11T19:37:57.841+0000 25359 document(s) imported successfully. 0 document(s) failed to import

      Wie der obige Befehl zeigt, wurden 25359 Dokumente importiert. Da wir keine Datenbank mit dem Namen newdb haben, hat MongoDB sie automatisch erstellt.

      Überprüfen wir den Import.

      Stellen Sie eine Verbindung mit der neu erstellten newdb-Datenbank her:

      Sie sind nun mit der newdb-Datenbankinstanz verbunden. Beachten Sie, dass sich Ihre Eingabeaufforderung geändert hat, was anzeigt, dass Sie mit der Datenbank verbunden sind.

      Zählen Sie die Dokumente in der Sammlung Restaurants mit dem Befehl:

      Das Ergebnis zeigt 25359, was die Anzahl importierter Dokumente ist. Für eine noch bessere Überprüfung können Sie das erste Dokument aus der Sammlung Restaurants wie folgt auswählen:

      Das Ergebnis sieht folgendermaßen aus:

      [secondary label Output]
      {
          "_id" : ObjectId("5fac3d937f12c471b3f26733"),
          "address" : {
              "building" : "1007",
              "coord" : [
                  -73.856077,
                  40.848447
              ],
              "street" : "Morris Park Ave",
              "zipcode" : "10462"
          },
          "borough" : "Bronx",
          "cuisine" : "Bakery",
          "grades" : [
              {
                  "date" : ISODate("2014-03-03T00:00:00Z"),
                  "grade" : "A",
                  "score" : 2
              },
      ...
          ],
          "name" : "Morris Park Bake Shop",
          "restaurant_id" : "30075445"
      }
      

      Eine solche detaillierte Überprüfung kann Probleme mit den Dokumenten wie ihrem Inhalt, der Codierung usw. enthüllen. Das Format json verwendet UTF-8-Codierung und Ihre Exporte und Importe sollten in dieser Codierung vorhanden sein. Denken Sie daran, wenn Sie die json-Dateien manuell bearbeiten. Andernfalls verarbeitet MongoDB dies automatisch für Sie.

      Um die MongoDB-Eingabeaufforderung zu beenden, geben Sie exit an die Eingabeaufforderung ein:

      Sie werden als non-root user zur normalen Befehlszeilenaufforderung zurückgegeben.

      Schritt 2 — Exportieren von Informationen aus MongoDB

      Wie bereits erwähnt, können Sie durch den Export von MongoDB-Informationen eine für Menschen lesbare Textdatei mit Ihren Daten abrufen. Standardmäßig werden Informationen im JSON-Format exportiert. Sie können sie jedoch auch nach CSV exportieren (durch Kommas getrennter Wert).

      Um Informationen aus MongoDB zu exportieren, verwenden Sie den Befehl mongoexport. Es ermöglicht Ihnen, einen sehr feinkörnigen Export zu exportieren, sodass Sie eine Datenbank, eine Sammlung, ein Feld und sogar eine Abfrage für den Export angeben können.

      Ein einfaches mongoexport-Beispiel wäre die Sammlung Restaurants aus der newdb-Datenbank, die wir zuvor importiert haben. Dies kann wie folgt erfolgen:

      • sudo mongoexport --db newdb -c restaurants --out newdbexport.json

      Im obigen Befehl verwenden wir --db, um die Datenbank -c für die Sammlung und --out für die Datei zu spezifizieren, in der die Daten gespeichert werden.

      Die Ausgabe eines erfolgreichen mongoexport sollte folgendermaßen aussehen:

      Output

      2020-11-11T19:39:57.595+0000 connected to: mongodb://localhost/ 2020-11-11T19:39:58.619+0000 [###############.........] newdb.restaurants 16000/25359 (63.1%) 2020-11-11T19:39:58.871+0000 [########################] newdb.restaurants 25359/25359 (100.0%) 2020-11-11T19:39:58.871+0000 exported 25359 records

      Die obige Ausgabe zeigt, dass 25359 Dokumente importiert wurden, die gleiche Anzahl wie die importierten sind.

      In einigen Fällen müssen Sie möglicherweise nur einen Teil Ihrer Sammlung exportieren. Angesichts der Struktur und den Inhalt der Restaurants-json-Datei exportieren wir alle Restaurants, die die Kriterien erfüllen, die sich in der Bronx befinden und chinesische Küche anbieten. Wenn wir diese Informationen direkt während der Verbindung mit MongoDB erhalten möchten, stellen Sie erneut eine Verbindung zur Datenbank her:

      Verwenden Sie dann diese Abfrage:

      • db.restaurants.find( { "borough": "Bronx", "cuisine": "Chinese" } )

      Die Ergebnisse werden dem Terminal angezeigt:

      Output

      • 2020-12-03T01:35:25.366+0000 connected to: mongodb://localhost/
      • 2020-12-03T01:35:25.410+0000 exported 323 records

      Um die MongoDB-Eingabeaufforderung zu beenden, geben Sie exit ein:

      Wenn Sie die Daten von einer sudo-Befehlszeile exportieren möchten, anstatt mit der Datenbank verbunden zu sein, machen Sie die vorherige Abfrage zu einem Teil des mongoexport-Befehls, indem Sie sie für das Argument -q wie folgt angeben:

      • sudo mongoexport --db newdb -c restaurants -q "{"borough": "Bronx", "cuisine": "Chinese"}" --out Bronx_Chinese_retaurants.json

      Beachten Sie, dass wir die doppelten Anführungszeichen mit Backslash () in der Abfrage umgehen. Ähnlich müssen Sie alle anderen Sonderzeichen in der Abfrage umgehen.

      Wenn der Export erfolgreich war, sollte das Ergebnis folgendermaßen aussehen:

      Output

      2020-11-11T19:49:21.727+0000 connected to: mongodb://localhost/ 2020-11-11T19:49:21.765+0000 exported 323 records

      Das obige Beispiel zeigt, dass 323 Datensätze exportiert wurden, und Sie können sie in der von uns angegebenen Datei Bronx_Chinese_retaurants.json finden.

      Verwenden Sie cat und less, um die Daten zu durchsuchen:

      • cat Bronx_Chinese_retaurants.json | less

      Verwenden Sie SPACE, um die Daten zu übermitteln:

      Output

      • date":{"$date":"2015-01-14T00:00:00Z"},"grade":"Z","score":36}],"na{"_id":{"$oid":"5fc8402d141f5e54f9054f8d"},"address":{"building":"1236","coord":[-73.8893654,40.81376179999999],"street":"238 Spofford Ave","zipcode":"10474"},"borough":"Bronx","cuisine":"Chinese","grades":[{"date":{"$date":"2013-12-30T00:00:00Z"},"grade":"A","score":8},{"date":{"$date":"2013-01-08T00:00:00Z"},"grade":"A","score":10},{"date":{"$date":"2012-06-12T00:00:00Z"},"grade":"B","score":15}],
      • . . .

      Drücken Sie q, um zu beenden. Sie können nun eine MongoDB-Datenbank importieren und exportieren.

      Zusammenfassung

      Dieser Artikel hat Sie in die Grundlagen zum Importieren und Exportieren von Informationen zu und aus einer MongoDB-Datenbank eingeführt. Sie können weitere Informationen über So sichern Sie eine MongoDB-Datenbank unter Ubuntu 20.04 lesen.

      Sie können auch die Replikation berücksichtigen. Durch die Replikation können Sie Ihren MongoDB-Dienst ohne Unterbrechung von einem Slave-MongoDB-Server aus fortsetzen, während Sie den Master-Dienst nach einem Fehler wiederherstellen. Teil der Replikation ist das Betriebsprotokoll (oplog), das alle Operationen aufzeichnet, die Ihre Daten ändern. Sie können dieses Protokoll genauso verwenden wie das Binärprotokoll in MySQL, um Ihre Daten nach dem letzten Backup wiederherzustellen. Denken Sie daran, dass Backups normalerweise nachts stattfinden. Wenn Sie sich entscheiden, abends einen Backup wiederherzustellen, fehlen Ihnen alle Aktualisierungen seit dem letzten Backup.



      Source link

      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