Bildelement mit Angular erstellen

Bildelement mit Angular erstellen

Informationen zu diesem Codelab

Zuletzt aktualisiert: Okt. 20, 2020

Verfasst von aayush

1. Einführung

Von Gastautor Aayush Arora

Angular-Elemente sind Angular-Komponenten, die als benutzerdefinierte Elemente verpackt sind. Sie werden derzeit von Chrome, Opera und Safari unterstützt. Sie sind in anderen Browsern über Polyfills verfügbar. Diese Elemente können die gesamte Angular-Infrastruktur mit einer gängigen Angular-Schnittstelle und Strategie zur Veränderungserkennung nutzen. Nach der Registrierung können diese Elemente im Browser verwendet werden.

In diesem Codelab lernen Sie Schritt für Schritt, wie Sie eine eckige Winkelkomponente erstellen, mit der Sie in ein eckiges Element umwandeln können, sodass es auch außerhalb des Angular-Frameworks funktioniert.

Wenn Sie sich noch gründlicher informieren möchten, Hier finden Sie das Gespräch.

Überblick

In diesem Codelab erstellen Sie ein Bildrutschelement mit einem Winkel. Ihr Element enthält: wie ein HTML-Element im Browser. Er muss in jedem Framework angeschlossen sein, das mit dem DOM kommuniziert.

Lerninhalte

• Benutzerdefinierte Komponente für Bildschieberegler erstellen
• Benutzerdefinierte Komponente „Bildschieber“ in benutzerdefiniertes Element umwandeln
• So packen Sie die Komponente so, dass sie im Browser funktioniert

Voraussetzungen

• Eine aktuelle Version von angular-cli.
• Beispielcode
• Ein Texteditor
• Grundkenntnisse zu Angular-Komponenten

In diesem Codelab geht es um Angular-Elemente. Auf irrelevante Konzepte wird nicht genauer eingegangen und entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

2. Einrichtung

Code herunterladen

Klicken Sie auf den folgenden Link, um den gesamten Code für dieses Codelab herunterzuladen:

Quellcode herunterladen

Entpacken Sie die heruntergeladene ZIP-Datei. Dadurch wird der Stammordner (angular-element-codelab-master) entpackt, der Folgendes enthält:

zwei Ordner (image-slider) und (image-slider-finished). Alle unsere Codierungen werden in einem Verzeichnis namens Image-Slider ausgeführt.

Projekt ausführen

Führen Sie das Projekt aus ( Run ng-serve ) aus dem Stammverzeichnis ( image-slider ).

Sobald der Bootstrap der App ausgeführt wurde, sehen Sie Folgendes:

3. Benutzerdefinierte Komponente „Bild-Schieberegler“ erstellen?

Bildschieberegler erstellen

Bei diesem Bild-Schieberegler haben Sie die Möglichkeit, Schaltflächen mit eckigem Klickbindung zu binden. Wir erstellen ein Array mit Objekten, die Bilder, ALT-Tags, Links usw. enthalten. Die Bilder werden in einem Container untereinander platziert und bei einem Klick übersetzt.

Wir erstellen nun eine Komponente „Bildschieber“ und wandeln diese dann in ein eckiges Element um.

• Container für Bilder und Titel.
• Ein Array, das die Daten enthält
• Vorlage zum Einbinden der Daten

4. Komponente „Bildschieberegler“ implementieren

Um das Projekt so einfach wie möglich zu gestalten und sich auf Angular-Elemente zu konzentrieren, gibt es mehrere Möglichkeiten für jedes Projekt. In diesem Fall haben wir Ihnen neben dem CSS auch grundlegenden Code bereitgestellt.

Array und Datendienst erstellen

Der Schiebereglerregler enthält Folgendes:

• Eine Bildschlüssel für die Bild-URL im Schieberegler
• Ein ALT-Tag für das Alt-Bild
• Text zur Beschreibung des Bildes

Die Datei data.json, die sich bereits in deinem src/assets-Verzeichnis befindet, sollte in etwa so aussehen:

sliderArray = [
 {img: 'http://bloquo.cc/img/works/1.jpg', alt: '', text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/2.jpg', alt: '',  text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/3.jpg', alt: '', text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/4.jpg', alt: '',  text: '365 Days Of weddings a year'},
 {img: 'http://bloquo.cc/img/works/5.jpg', alt: '', text: '365 Days Of weddings a year'}
];

Wir müssen diese Daten in unserer Komponente mithilfe eines Dienstes abrufen. In der Datei data.service.ts schreiben Sie eine getData()-Methode mit dem httpClient-Modul von @angular/common/http, wodurch die Daten aus dem oben erstellten Array abgerufen werden.

 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

const URL = '../assets/data.json';

@Injectable({
 providedIn: 'root'
})
export class DataService {

 constructor(private http: HttpClient) {}

 getData() {
   return this.http.get(URL)
 }
}

Wir haben dir die Servicevorlage und ein Array geschickt, damit du etwas Zeit sparen und dafür sorgen kannst, dass du auf einer soliden Basis beginnst. Im nächsten Abschnitt haben Sie die Möglichkeit, Ihren eigenen Code zu schreiben.

Daten aus dem Datendienst abrufen

Wir müssen unseren Dienst in die Komponente importieren und dann die beobachtbare Methode abonnieren, um das Objekt von data.json zu erhalten.

Hierfür sind drei Schritte erforderlich:

• Komponentenarray initialisieren
• Von der Funktion getData() beobachtete beobachtbare Funktion abonnieren
• Erstellen Sie ein Result-Schnittstellenobjekt für die Typüberprüfung der Daten, nachdem Sie die Beobachtbarkeit abonniert haben.
• Weisen Sie die Daten dem Komponentenarray zu.

Komponentenarray initialisieren

Wir deklarieren und initialisieren das Komponenten-Array in slider.component.ts, das ein Array von Objekten ist:

Das geht so:

sliderArray: object[];

So initialisieren Sie:

constructor(private data: DataService) {
 this.sliderArray = [];
}

Als Nächstes müssen wir unseren Dienst in den Konstruktor importieren und initialisieren

constructor(private data: DataService) {}

Jetzt sind wir bereit, unseren Dienst zu nutzen und unsere Dienstmethoden aufzurufen.

Daten aus Data Service abrufen

Um die Daten aus dem Dienst abzurufen, rufen wir die Methode getData() auf und abonnieren die beobachtbare Funktion, die zurückgegeben werden soll. Außerdem erstellen wir eine Schnittstelle Result,, mit der wir prüfen können, ob wir die richtigen Daten erhalten.

Das erfolgt innerhalb der ngOnInit-Methode:

this.data.getData().subscribe((result: Result)=>{
})

Daten zu Component Array zuweisen

Am Ende weisen wir die Daten dem Komponentenarray zu:

this.data.getData().subscribe((result: Result)=>{  
  this.sliderArray = result.sliderArray;
})

Sobald wir die Daten in unserem Array erhalten, können wir unsere Vorlage mit diesen Daten binden.

In der slider.component.html, gibt es bereits eine HTML-Vorlage. Im nächsten Schritt binden Sie diese Vorlage mit der sliderArray ein.

5. Daten mit der Vorlage binden

Wir binden die Daten mithilfe der Richtlinie *ngFor an die Vorlage und fügen dann in der Vorlage Transformationen hinzu, damit der Schieberegler funktioniert.

Dies umfasst drei Schritte:

• Bindung von sliderArray an die Vorlage
• Ereignisbindung für Schieberegler hinzufügen
• CSS-Transformationen mit ngStyle und ngClass hinzufügen

schiebearray an die Komponente binden

Wir haben einen Container, der img-container, a text-container und a slider. enthält

Wir binden die Daten in allen drei Containern mithilfe der *ngFor-Anweisung.

<div class="container">
 <div class="img-container" *ngFor="let i of sliderArray; let select = index;">
   <img src="{{i.img}}" alt="{{i.alt}}" >
 </div>

 <div>
   <div class="text-container">
     <div class="page-text" *ngFor="let i of sliderArray;let select = index;">
       <h3>{{i.text}}</h3>
     </div>
   </div>
 </div>

</div>

<div class="slider">
 <div class="slide-button-parent-container" *ngFor="let i of sliderArray; let x =index">
    <div class="select-box">
     <div class="slide-button">
     </div>
    </div>
 </div>
</div>

Ereignisbindung anFolieArray

Nachdem die Daten gebunden sind, binden wir das Klickereignis mit einem angularen click binding-Element an jede Schaltfläche. Wir erstellen eine Funktion namens selected(x), wobei x der Index des Arrays ist.

selected(x) {
 this.downSelected(x);
 this.selectedIndex = x;
}

downSelected(i) {
  this.transform =  100 - (i) * 50;
  this.selectedIndex = this.selectedIndex + 1;
  if(this.selectedIndex > 4) {
    this.selectedIndex = 0;
  }
}

Wichtige Hinweise:

• Mit der nach unten ausgewählten Funktion wird der Wert der Transformationseigenschaft auf das Fünffache des Werts des Index verringert, der beim Klicken auf die Funktion selected übergeben wird.
• Bei dieser Logik werden die Textcontainer in 100%, 50%, -50 % und -100% umgewandelt, was zu vier verschiedenen Zuständen führt.

CSS-Transformationen mit ngStyle & ngClass hinzufügen

Anfangs werden alle Bilder mit einer Deckkraft von null festgelegt. Wir fügen die Klasse selected mithilfe von ngClass directive hinzu, wenn der ausgewählte Index dem Bildindex entspricht. Diese selected-Klasse fügt dem Bild eine Deckkraft von 1 hinzu, damit es für den Nutzer sichtbar ist.

<div class="img-container"  *ngFor="let i of sliderArray; let select = index;"
      [ngClass]="{'selected': select == selectedIndex}">
</div>

Danach übersetzen wir den Textcontainer gemäß dem transform-Wert, der mit der select()-Funktion berechnet wird.

<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>

Wenn Sie alle Schritte ausgeführt haben, können Sie den endgültigen Code wie unten beschrieben abrufen:

<div class="container">
 <div class="img-container"  *ngFor="let i of sliderArray; let select = index;"
      [ngClass]="{'selected': select == selectedIndex}">
   <img src="{{i.img}}" alt="{{i.alt}}" >
 </div>

 <!--</div>-->
 <div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
   <div class="text-container">
     <div class="page-text" *ngFor="let i of sliderArray;let select = index;" [ngClass]="{'selected': select == selectedIndex}">
       <h3>{{i.text}}</h3>
     </div>
   </div>
 </div>

</div>

<div class="slider">
 <div class="slide-button-parent-container"  *ngFor="let i of sliderArray; let x =index" (click)="selected(x)" >
    <div class="select-box">
     <div   class="slide-button" [ngClass]="{'slide-button-select': x == selectedIndex}" >
     </div>
    </div>
 </div>
</div>

6. Die Komponente in das Winkelelement umwandeln

Dieser Prozess besteht aus fünf Schritten:

• Shadow DOM für eckiges Element verwenden
• entryComponents wird verwendet
• CreateCustomElement-Modul aus @angular/elements importieren und verwenden
• Unsere custom-element definieren
• Methode ngDoBootstrap ausführen

Shad DOM für eckige Elemente

Wir haben jetzt einen Bildschieberegler, der nur noch zu Angular Element gemacht werden muss.

Der interessante Teil ist, dass nur eine kleine Änderung für die Erstellung des Komponenten-DOMs, eines Schatten-DOMs, vorliegt.

Wir müssen das Modul ViewEncapsulation importieren und daraus die Methode ShadowDom verwenden.

@Component({
 selector: 'app-slider',
 templateUrl: './slider.component.html',
 styleUrls: ['./slider.component.css'],
 encapsulation: ViewEncapsulation.ShadowDom
})

Eintragskomponenten verwenden

Die Eingabekomponente ist eine Komponente, bei der ein Winkel unbedingt geladen wird. Sie geben eine Eintragskomponente an, indem Sie sie in einem NgModule aktualisieren.

Hier geben wir den SliderComponent im entryComponents-Array in @NgModule an.

@NgModule({
 declarations: [
   SliderComponent
 ],
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 entryComponents: [SliderComponent],
})

„createCustomElement“-Modul importieren und verwenden

Hier müssen wir das createCustomElement-Modul von @angular/elements. verwenden. SliderComponent, muss als Parameter für die Funktion createCustomElement verwendet werden. Danach müssen wir die slider im DOM registrieren.

import { createCustomElement } from '@angular/elements';

export class AppModule {
 constructor(private injector: Injector) {
   const slider = createCustomElement(SliderComponent, { injector });
    }
}

Für die Registrierung des Schiebereglers als DOM-Element verwenden wir die Methode customElements.define.

customElements.define('motley-slider', slider);

Zu guter Letzt müssen wir dieses benutzerdefinierte Element mit der Methode ngDoBootstrap() per Bootstrap verbinden. Der vollständige Code sieht so aus:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { SliderComponent } from './slider/slider.component';
import { HttpClientModule} from "@angular/common/http";

@NgModule({
 declarations: [
   SliderComponent
 ],
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 entryComponents: [SliderComponent],
})
export class AppModule {
 constructor(private injector: Injector) {
   const slider = createCustomElement(SliderComponent, { injector });
   customElements.define('motley-slider', slider);
 }

 ngDoBootstrap() {}

}

Verpackung des Angular-Elements

Wir müssen package.json mit den neuen Befehlen ändern. Dazu ändern wir das Skriptobjekt innerhalb der package.json-Datei.

Sehen wir uns nun unser geändertes Skriptobjekt an:

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build --prod --output-hashing=none",
 "package": "cat dist/my-app/{runtime,polyfills,scripts,main}.js | gzip > elements.js.gz",
 "serve": "http-server",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}

Jetzt können wir den Befehl ng build & ng package ausführen und schließlich „ng service“ in den Ordner „dist/“ einfügen, der mit dem Build-Befehl generiert wurde. Wir können auch die gzip aus dem ng package-Befehl verwenden, sie extrahieren und sie als npm module veröffentlichen.