Informacje o tym ćwiczeniu (w Codelabs)
1. Wstęp
Autor: gościnnie Aayush Arora
Elementy Angular to komponenty Angular pakowane jako elementy niestandardowe. Są one obecnie obsługiwane przez przeglądarki Chrome, Opera i Safari. Są też dostępne w innych przeglądarkach za pomocą elementu polyfill. Te elementy mogą korzystać z całej infrastruktury Angular ze wspólną strategią Angular Interface i strategią wykrywania zmian. Po zarejestrowaniu tych elementów można ich używać w przeglądarce.
Dzięki nim dowiesz się, jak utworzyć własny komponent kątowy suwaka, a następnie przekształcić go w element o nieregularnym kształcie, dzięki czemu będzie on mógł działać poza platformą Angular.
Co utworzysz
|
W tym ćwiczeniu z programowania stworzysz element suwaka grafiki. Twój element wi:
|
Czego się nauczysz:
- Jak utworzyć komponent przesuwania obrazów
- Jak przekształcić komponent komponentu przesuwany obraz w element niestandardowy
- Jak spakować komponent, by działał w przeglądarce
Czego potrzebujesz
- Najnowsza wersja angular-cli.
- Przykładowy kod
- Edytor tekstu
- Podstawowa komponent Angular
To ćwiczenie programowania skupia się na elementach Angular. Nieistotne koncepcje i bloki kodu zostały zamaskowane. Można je po prostu skopiować i wkleić.
2. Konfiguracja
Pobieranie kodu
Aby pobrać cały kod do tych ćwiczeń z programowania, kliknij ten link:
Rozpakuj pobrany plik ZIP. Rozpakujesz folder główny (angular-element-codelab-master) zawierający
2 foldery: (image-slider) i (image-slider-finished). Wszystkie czynności związane z kodowaniem będziemy wykonywać w katalogu o nazwie „slide-slide”.
Uruchamianie projektu
Aby uruchomić projekt, uruchom polecenie ( ng-serve ) z katalogu głównego ( image-slider ).
Po uruchomieniu aplikacji zobaczysz te informacje:
3. Tworzysz niestandardowy komponent Image-Slider?
Jak utworzyć suwak obrazu?
W przypadku tego suwaka obrazu możesz powiązać przyciski za pomocą kątowego wiązania kliknięć. Utworzymy tablicę obiektów zawierających obrazy, tagi alt, linki itp. Umieścimy te obrazy jedna po drugiej w kontenerze i przetłumaczymy kontener po kliknięciu.
Utworzymy komponent suwaka obrazu, a następnie przekształcimy go w element kanciasty.
- Kontener obrazów i tytułów.
- Tablica zawierająca dane
- Szablon do powiązania danych
4. Zaimplementuj komponent suwaka obrazu
Projekt można rozpocząć na wiele sposobów, co ma na celu uproszczenie i skupienie się na elementach Angular. Dostarczamy podstawowy kod wraz z kodem CSS.
Tworzenie tablicy i usługi danych
Pamiętaj, że tablica zawiera:
- klucz img adresu URL obrazu na suwaku.
- Tag alternatywny, który należy podać dla obrazu
- Tekst opisu obrazu.
Plik data.json, który jest już w Twoim katalogu src/assets, powinien wyglądać mniej więcej tak.
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'}
];
Musimy pobrać te dane w komponencie za pomocą usługi. W pliku data.service.ts zapiszemy metodę getData() za pomocą modułu httpClient z @angular/common/http, który będzie pobierać dane z tablicy, którą utworzyliśmy powyżej.
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)
}
}
Pobieranie danych z usługi danych
Musimy zaimportować naszą usługę do komponentu, a następnie zasubskrybować element obserwowalny, by otrzymać obiekt z obiektu data.json
Musimy wykonać te czynności:
- Inicjuję tablicę komponentów
- Subskrybowanie obserwowanej funkcji zwróconej przez funkcję
getData() - Utwórz wynik interfejsu do sprawdzania danych po wykupieniu subskrypcji do obserwowania.
- Przypisz dane do tablicy komponentów.
Inicjuję tablicę komponentów
Zadeklarujemy i zainicjujemy tablicę komponentów w tablicy slider.component.ts, która jest tablicą obiektów:
Aby zadeklarować:
sliderArray: object[];
Aby zainicjować:
constructor(private data: DataService) {
this.sliderArray = [];
}
Następnie musimy zaimportować i zainicjować usługę w konstruktorze
constructor(private data: DataService) {}
Teraz możemy skorzystać z naszej usługi i wywołać nasze metody.
Pobieranie danych z usługi danych
Aby pobrać dane z usługi, wywołamy metodę getData() i zasubskrybujemy możliwość powrotu do stanu faktycznego. Utworzymy też interfejs Result,, dzięki któremu będziemy mogli sprawdzić, czy pobieramy prawidłowe dane.
Zrobimy to w ramach metody ngOnInit:
this.data.getData().subscribe((result: Result)=>{
})
Przypisywanie danych do tablicy komponentów
Na końcu przypiszemy dane do tablicy komponentów:
this.data.getData().subscribe((result: Result)=>{
this.sliderArray = result.sliderArray;
})
Gdy uzyskamy dane w tablicy, możemy powiązać ten szablon z tymi danymi.
slider.component.html, zawiera już szablon HTML. Następnym krokiem jest powiązanie tego szablonu z sliderArray.
5. Wiązanie danych z szablonem
Połączymy dane z szablonem za pomocą dyrektywy *ngFor i dodamy do szablonu przekształcenia, by suwak mógł działać.
Ten proces składa się z trzech kroków:
- Powiązanie
sliderArrayz szablonem - Dodawanie powiązania zdarzeń dla przycisków suwaka
- Dodawanie przekształceń CSS za pomocą
ngStyleingClass
Wiązanie tablicy Jamboard do komponentu
Nasz kontener zawiera img-container, a text-container i a slider.
Połączymy dane ze wszystkich trzech kontenerów za pomocą dyrektywy *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>
Powiązanie zdarzenia z ArrayArray
Gdy dane zostaną powiązane, powiążemy zdarzenie kliknięcia z każdym przyciskiem slajdu za pomocą kątowego click binding. Utworzymy funkcję o nazwie selected(x), w której x to indeks tablicy.
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;
}
}
Pamiętaj o tych kwestiach:
- Ograniczona funkcja zmniejsza wartość właściwości przekształcenia 50 razy indeksu przekazanego po kliknięciu funkcji
selected. - Ta logika przekształca kontener tekstu na 100%, 50%, -50% i -100%, co daje 4 różne stany.
Dodawanie przekształceń CSS za pomocą elementów ngStyle & ngClass
Początkowo ustawiamy wszystkie obrazy jako nieprzezroczyste i dodajemy klasę selected przy użyciu ngClass directive, gdy wybrany indeks staje się równy indeksowi obrazu. Ta klasa selected dodaje przezroczystość jednego obrazu do obrazu, dzięki czemu obraz jest widoczny dla użytkownika.
<div class="img-container" *ngFor="let i of sliderArray; let select = index;"
[ngClass]="{'selected': select == selectedIndex}">
</div>
Potem przetłumaczymy kontener tekstu zgodnie z wartością transform obliczoną za pomocą funkcji select().
<div [ngStyle]="{'transform': 'translateY('+ transform + '%' +')', 'transition': '.8s'}">
</div>
Gdy wykonasz wszystkie opisane czynności, kod znajdziesz poniżej:
<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. Przekształcanie komponentu w element kątowy
Procedura składa się z 5 kroków:
- Używanie elementu
Shadow DOMw elementach kątowych - Korzystanie z usługi
entryComponents - Importowanie i używanie modułu
CreateCustomElementz aplikacji@angular/elements - Definicja obiektu
custom-element - Uruchamiam metodę
ngDoBootstrap
Używanie DOM Shaww DOM w przypadku elementu kanionowego
Teraz uruchomiliśmy suwak danych, więc trzeba ustawić go jako Angular Element.
Zabawną rzeczą jest to, że istnieje niewielka zmiana w stworzeniu komponentu DOM, czyli cienia DOM.
Musimy zaimportować moduł ViewEncapsulation i należy zastosować z niego metodę ShadowDom.
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
encapsulation: ViewEncapsulation.ShadowDom
})
Używanie komponentu entryComponent
Składnik wpisu jest wyzwalany bez końca. Komponent wpisu określa się, uruchamiając go w module NgModule.
Tutaj określimy SliderComponent w tablicy entryComponents w @NgModule
@NgModule({
declarations: [
SliderComponent
],
imports: [
BrowserModule,
HttpClientModule
],
entryComponents: [SliderComponent],
})
Importowanie i używanie modułu createCustomElement
Musimy tu użyć modułu createCustomElement z funkcji @angular/elements.. Użyj parametru SliderComponent, jako parametru funkcji createCustomElement. Po tym czasie musimy zarejestrować slider w DOM.
import { createCustomElement } from '@angular/elements';
export class AppModule {
constructor(private injector: Injector) {
const slider = createCustomElement(SliderComponent, { injector });
}
}
Aby zarejestrować suwak jako element DOM, zdefiniujemy go za pomocą metody customElements.define.
customElements.define('motley-slider', slider);
I na koniec musimy uruchomić ten element niestandardowy metodą ngDoBootstrap(). Pełny kod będzie wyglądał tak:
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() {}
}
Pakowanie elementu Angular
Musimy zmodyfikować obiekt package.json za pomocą nowych poleceń. Zmodyfikuj obiekt skryptu w pliku package.json.
Sprawdźmy zmodyfikowany obiekt skryptu:
"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"
}
Teraz możemy uruchomić polecenie ng build & ng package i w końcu uruchomić ng udostępniania, aby wyświetlić dyskt/folder wygenerowany za pomocą polecenia kompilacji. Możemy też użyć polecenia gzip uzyskanego z polecenia ng package, wyodrębnić je i opublikować jako npm module.