Informazioni su questo codelab
1. Introduzione
Di Aayush Arora
Gli elementi angolari sono componenti angolari pacchettizzati come elementi personalizzati. Attualmente sono supportate da Chrome, Opera e Safari e sono disponibili in altri browser tramite polyfill. Questi elementi possono utilizzare l'intera infrastruttura Angular con la comune interfaccia Angular e la strategia di rilevamento dei cambiamenti. Una volta registrati, questi elementi possono essere utilizzati all'interno del browser.
Questo codelab ti guiderà nella creazione del tuo componente angolare di scorrimento delle immagini e ti aiuterà a trasformarlo in un elemento angolare in modo che possa funzionare al di fuori del framework Angular.
Cosa imparerai a realizzare
|
In questo codelab, creerai un elemento diapositiva di scorrimento immagine utilizzando elementi angolari. Il tuo elemento wi:
|
Cosa imparerai a fare:
- Come creare un componente personalizzato per il dispositivo di scorrimento delle immagini
- Come trasformare il componente personalizzato del dispositivo di scorrimento delle immagini in un elemento personalizzato
- Come imballare il componente in modo che funzioni all'interno del browser
Che cosa ti serve
- Una versione recente di angular-cli.
- Codice di esempio
- Un editor di testo
- Conoscenza di base dei componenti Angular
Questo codelab è incentrato su Angular Elements. Concetti e blocchi di codice non pertinenti sono trattati solo superficialmente e sono forniti solo per operazioni di copia e incolla.
2. Preparazione
Scarica il codice
Fai clic sul seguente link per scaricare tutto il codice di questo codelab:
Apri il file ZIP scaricato. Verrà decompressa una cartella root (angular-element-codelab-master), che contiene
due cartelle: (image-slider) e (image-slider-finished). Eseguiremo tutte le operazioni di programmazione in una directory denominata image-scroller.
Eseguire il progetto
Per eseguire il progetto, devi eseguire il comando ( ng-serve) dalla directory radice ( image-scroller).
Una volta eseguito l'avvio dell'app, potrai visualizzare:
3. Vuoi creare un componente personalizzato di Image-Diapositiva?
Come creare un dispositivo di scorrimento delle immagini?
Per questo dispositivo di scorrimento immagine, associa i pulsanti utilizzando l'associazione di clic angolare. Verrà creato un array di oggetti contenenti immagini, tag alt, link e così via. Inseriremo queste immagini una sotto l'altra in un container e traducemo il container al clic.
Creeremo un componente dispositivo di scorrimento immagini per poi trasformarlo in elemento angolare.
- Contenitore di immagini e titoli.
- Un array che contiene i dati
- Modello per associare i dati
4. Implementare il componente dispositivo di scorrimento delle immagini
Esistono diversi modi per iniziare qualsiasi progetto, in questo caso per semplificare al massimo il progetto e concentrarci su Angular Elements, ti abbiamo fornito il codice di base insieme al CSS.
Creazione di un array e di un servizio dati
Ricorda che la barra di scorrimento conterrà:
- Una chiave img per l'URL dell'immagine nel dispositivo di scorrimento
- Un tag alternativo per fornire testo alternativo per l'immagine
- Un testo per fornire la descrizione dell'immagine.
Il file data.json che si trova già nella tua directory src/assets dovrebbe essere simile al seguente.
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'}
];
Dobbiamo recuperare questi dati nel nostro componente utilizzando un servizio. Nel file data.service.ts, scriveremo un metodo getData() utilizzando il modulo httpClient da @angular/common/http, che recupererà i dati dall'array che abbiamo creato in precedenza.
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)
}
}
Recupero dei dati dal servizio dati
Dobbiamo importare il nostro servizio all'interno del componente, dopodiché possiamo abbonarti all'osservatore per ottenere l'oggetto da data.json
Dobbiamo eseguire tre passaggi:
- Inizializzazione di un array di componenti
- Iscrizione alla funzione Osservabile restituita da
getData() - Crea un'interfaccia per l'interfaccia per il controllo dei tipi di dati dopo la sottoscrizione all'osservatore.
- Assegna i dati all'array dei componenti.
Inizializzazione dell'array dei componenti
Dichiariamo e inizializzamo l'array di componenti all'interno di slider.component.ts, ovvero un array di oggetti:
Per dichiarare:
sliderArray: object[];
Per inizializzare:
constructor(private data: DataService) {
this.sliderArray = [];
}
Quindi, dobbiamo importare e inizializzare il nostro servizio all'interno del costruttore
constructor(private data: DataService) {}
Ora siamo pronti a utilizzare il nostro servizio e a chiamare i nostri metodi di servizio.
Ottenere dati dal servizio dati
Per eliminare i dati dal servizio, chiameremo il metodo getData() e ci abboniamo all'osservatorio che verrà restituito, e creeremo anche un'interfaccia Result, per consentirci di digitare per verificare che stiamo ricevendo i dati corretti.
Lo faremo all'interno del metodo ngOnInit:
this.data.getData().subscribe((result: Result)=>{
})
Assegnazione di dati a un array di componenti
Alla fine, assegneremo i dati all'array dei componenti:
this.data.getData().subscribe((result: Result)=>{
this.sliderArray = result.sliderArray;
})
Dopo aver ricevuto i dati all'interno dell'array del componente, possiamo associare il nostro modello a tali dati.
Nel modello slider.component.html, abbiamo già un modello HTML. Il prossimo passaggio consiste nell'associare questo modello all'elemento sliderArray.
5. Associazione dei dati al modello
Associamo i dati al modello utilizzando la direttiva *ngFor e, infine, aggiungi trasformazioni al modello per fare in modo che il dispositivo di scorrimento funzioni.
Questa procedura prevede tre passaggi:
- Associazione di
sliderArrayal modello - Aggiunta dell'associazione di eventi per i pulsanti di scorrimento
- Aggiunta di trasformazioni CSS mediante
ngStyleengClass
Associazione di SlideArray al componente
Abbiamo un contenitore con img-container, a text-container e a slider.
I dati verranno associati in tutti e tre i contenitori utilizzando l'istruzione *ngFor
<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>
Associazione dell'evento a diapositiveArray
Una volta associati i dati, associamo l'evento di clic a ogni pulsante di diapositiva utilizzando l'angolare click binding. Creeremo una funzione chiamata selected(x)dove x è l'indice dell'array.
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;
}
}
Punti da ricordare qui:
- La funzione verso il basso riduce il valore della proprietà di trasformazione cinquanta volte che l'indice è passato al clic della funzione
selected. - Questa logica traduce il contenitore di testo in 100%, 50%, -50%, -100%, generando quattro stati diversi.
Aggiungere trasformazioni CSS utilizzando ngStyle &ngClass
Inizialmente, impostiamo tutte le immagini, con un'opacità pari a zero, aggiungiamo una classe selected utilizzando ngClass directive quando l'indice selezionato diventa uguale all'indice delle immagini. Questa classe selected aggiunge un'opacità all'immagine, rendendola visibile all'utente.
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
</div>
In seguito, traducemo il contenitore di testo in base al valore transform calcolato utilizzando la funzione select().
<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>
Dopo aver eseguito tutti questi passaggi, puoi trovare il codice finale riportato di seguito:
<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. Trasformazione del componente nell'elemento angolare
La procedura è composta da cinque passaggi:
- Utilizzo di
Shadow DOMper l'elemento angolare - Utilizzo di
entryComponents - Importazione e utilizzo del modulo
CreateCustomElementda@angular/elements - Definizione di
custom-element - Metodo
ngDoBootstrapin esecuzione
Utilizzo di Shadow DOM per gli elementi angolari
Ora che il nostro dispositivo di scorrimento delle immagini è in esecuzione, dobbiamo solo renderlo Angular Element.
La parte divertente è che c'è solo una piccola modifica per rendere il componente DOM, un shadow DOM.
Dobbiamo importare il modulo ViewEncapsulation e utilizzare il metodo ShadowDom.
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
Utilizzo di entryComponents
Il componente Voce è un componente che viene caricato in modo imperativo. Puoi specificare un componente di voce inserendolo in un modulo NgModule.
Qui specificheremo il nostro SliderComponent nell'array entryComponents all'interno di @NgModule
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
Importazione e utilizzo del modulo createCustomElement
Qui, dobbiamo utilizzare il modulo createCustomElement di @angular/elements.. Devi utilizzare SliderComponent, come parametro per la funzione createCustomElement. Successivamente, dobbiamo registrare slider nel DOM.
import { createCustomElement } from '@angular/elements';
export class AppModule {
constructor(private injector: Injector) {
const slider = createCustomElement(SliderComponent, { injector });
}
}
Per registrare il dispositivo di scorrimento come elemento DOM, lo definiremo utilizzando il metodo customElements.define.
customElements.define('motley-slider', slider);
Infine, dobbiamo eseguire il bootstrap di questo elemento personalizzato utilizzando il metodo ngDoBootstrap(). Il codice completo avrà il seguente aspetto:
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() {}
}
Imballaggio dell'elemento Angular
Dobbiamo modificare package.json con i nostri nuovi comandi, modificheremo l'oggetto script all'interno del file package.json.
Controlliamo l'oggetto script modificato:
"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"
}
Ora, possiamo eseguire il comando ng build & ng package e infine eseguiamo ng serve per pubblicare la dist/ cartella generata usando il comando build. Possiamo anche utilizzare il comando gzip ottenuto dal comando ng package, estrarlo e pubblicarlo come npm module.