Bu sayfa, Cloud Translation API ile çevrilmiştir.

Angular kullanarak resim kaydırma çubuğu öğesi oluşturma

1. Giriş

Konuk yazar Aayush Arora tarafından

Angular Elements, özel öğeler olarak paketlenmiş Angular bileşenleridir. Şu anda Chrome, Opera ve Safari tarafından desteklenmektedir ve diğer tarayıcılarda polyfill'ler aracılığıyla kullanılabilir. Bu öğeler, ortak Angular arayüzü ve değişiklik algılama stratejisiyle Angular altyapısının tamamından yararlanabilir. Kayıt işleminden sonra bu öğeler tarayıcıda kullanılabilir.

Bu codelab'de, kendi resim kaydırma Angular bileşenini oluşturma ve ardından Angular Framework'ün dışında çalışabilmesi için Angular öğesine dönüştürme adımları açıklanmaktadır.

Ne oluşturacaksınız?

Bu codelab'de, Angular kullanarak bir resim kaydırma çubuğu öğesi oluşturacaksınız. Elementiniz:

tarayıcıda bir HTML öğesi gibi çalışır
DOM ile iletişim kuran herhangi bir çerçeveye bağlanabilir.

Neler öğreneceksiniz?

Resim kaydırma çubuğu özel bileşeni oluşturma
Resim kaydırma özel bileşenini özel öğeye dönüştürme
Bileşeni tarayıcıda çalışacak şekilde paketleme

Gerekenler

angular-cli'nin son sürümü.
Örnek kod
Metin düzenleyici
Angular bileşenleri hakkında temel bilgiler

Bu codelab, Angular Elements'a odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.

2. Hazırlanma

Kodu İndirme

Bu codelab'deki tüm kodları indirmek için aşağıdaki bağlantıyı tıklayın:

İndirilen ZIP dosyasını açın. Bu işlem, aşağıdakileri içeren bir kök klasör (angular-element-codelab-master)'ı açar:

(image-slider) ve (image-slider-finished) adlı iki klasör Tüm kodlama çalışmalarımızı image-slider adlı bir dizinde yapacağız.

Projeyi hayata geçirme

Projeyi çalıştırmak için komutu ( ng-serve) kök dizinden ( image-slider) çalıştırmanız gerekir.

Uygulama başlatıldıktan sonra şunları görebilirsiniz:

3. Resim kaydırma çubuğu özel bileşeni mi oluşturuyorsunuz?

Resim kaydırıcı nasıl oluşturulur?

Bu resim kaydırıcı için düğmeleri açısal tıklama bağlaması kullanarak bağlayın. Resimler, alt etiketler, bağlantılar vb. içeren bir nesne dizisi oluşturacağız. Bu resimleri bir kapsayıcıda alt alta yerleştirecek ve tıklama üzerine kapsayıcıyı çevireceğiz.

Öncelikle bir resim kaydırma çubuğu bileşeni oluşturacağız, ardından bunu angular-element'e dönüştüreceğiz.

Resimler ve başlıklar için kapsayıcı.
Verileri içeren bir dizi
Verileri bağlama şablonu

4. Resim kaydırma çubuğu bileşenini uygulama

Herhangi bir projeye başlamanın birden fazla yolu vardır. Bu durumda, projemizi olabildiğince basit tutmak ve Angular Elements'e odaklanmak için size CSS ile birlikte temel kod sağladık.

Dizi ve veri hizmeti oluşturma

sliderArray'in şunları içereceğini unutmayın:

Kaydırma çubuğundaki resim URL'si için bir img anahtarı
Resim için alternatif metin sağlayan bir alt etiketi
Resimle ilgili açıklamayı sağlayacak metin

src/assets dizininizde bulunan data.json dosyası aşağıdaki gibi görünmelidir.

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'}
];

Bu verileri bir hizmet kullanarak bileşenimizde getirmemiz gerekiyor. data.service.ts dosyasında, yukarıda oluşturduğumuz diziden verileri getirecek olan @angular/common/http içindeki httpClient modülünü kullanarak bir getData() yöntemi yazacağız.

 
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)
 }
}

Veri hizmetinden verileri getirme

Hizmetimizi bileşene aktarmamız gerekir. Ardından, data.json öğesinden nesneyi almak için observable'a abone olabiliriz.

Bunun için üç adım uygulamamız gerekir:

Bileşen dizisini başlatma
getData() işlevi tarafından döndürülen Observable'a abone olma
Observable'a abone olduktan sonra verilerin türünü kontrol etmek için Result arayüzü oluşturun.
Verileri bileşen dizisine atayın.

Bileşen dizisi başlatılıyor

slider.component.ts içinde, nesne dizisi olan bileşen dizisini tanımlayıp başlatacağız:

Beyan etmek için:

sliderArray: object[];

İlk kullanıma hazırlamak için:

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

Ardından, hizmetimizi oluşturucuya aktarıp başlatmamız gerekir.

constructor(private data: DataService) {}

Artık hizmetimizi kullanmaya ve hizmet yöntemlerimizi çağırmaya hazırız.

Veri hizmetinden veri alma

Verileri hizmetten almak için getData() yöntemini çağırıp döndüreceği gözlemlenebilir öğesine abone olacağız. Ayrıca, doğru verileri aldığımızı tür denetimiyle doğrulayabilmek için Result, arayüzünü oluşturacağız.

Bu işlemi ngOnInit yöntemi içinde yapacağız:

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

Bileşen dizisine veri atama

Son olarak, verileri bileşen dizisine atayacağız:

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

Veriler bileşenimizin dizisine girdikten sonra şablonumuzu bu verilere bağlayabiliriz.

slider.component.html, içinde zaten bir HTML şablonumuz var. Bir sonraki adımımız, bu şablonu sliderArray ile bağlamaktır.

5. Verileri şablonla bağlama

Verileri *ngFor yönergesini kullanarak şablona bağlayacağız ve son olarak kaydırma çubuğunun çalışması için şablona dönüşümler ekleyeceğiz.

Bu işlem üç adımdan oluşur:

sliderArray öğesini şablona bağlama
Kaydırma çubuğu düğmeleri için etkinlik bağlama ekleme
ngStyle ve ngClass kullanarak CSS dönüşümleri ekleme

slideArray'i bileşene bağlama

img-container, a text-container ve a slider. içeren bir kapsayıcımız var.

Üç kapsayıcıdaki verileri *ngFor yönergesini kullanarak bağlayacağız.

<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>

slideArray ile Etkinlik Bağlama

Veriler bağlandıktan sonra, tıklama etkinliğini Angular click binding kullanarak her kaydırma düğmesine bağlayacağız. Dizinin dizini x olmak üzere selected(x) adlı bir işlev oluşturacağız.

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;
  }
}

Bu konuda dikkat edilmesi gereken noktalar:

Alt işlev, selected işlevi tıklandığında iletilen dizinin elli katı kadar dönüştürme özelliğinin değerini azaltır.
Bu mantık, metin kapsayıcısını %100, %50, -%50, -%100 oranında çevirerek dört farklı durum oluşturur.

ngStyle ve ngClass kullanarak CSS dönüştürmeleri ekleme

Başlangıçta tüm resimleri sıfır opaklıkta ayarlıyoruz. Seçilen dizin, resim dizinine eşit olduğunda ngClass directive kullanılarak selected sınıfı ekleniyor. Bu selected sınıfı, resme opaklık değeri 1 ekleyerek resmi kullanıcıya görünür hale getirir.

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

Ardından, transform işlevi kullanılarak hesaplanan select() değerine göre metin kapsayıcısını çeviririz.

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

Tüm bu adımları uyguladıktan sonra, nihai kodu aşağıdaki şekilde öğrenebilirsiniz:

<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. Bileşeni açısal öğeye dönüştürme

Bu prosedür beş adımdan oluşur:

Angular öğesi için Shadow DOM kullanma
entryComponents'dan yararlanma
CreateCustomElement modülünü @angular/elements hizmetinden içe aktarma ve kullanma
custom-element tanımlama
Çalıştırma ngDoBootstrap Yöntemi

Angular öğesi için gölge DOM kullanma

Artık resim kaydırma çubuğumuz çalışıyor. Bunu Angular Element yapmamız yeterli.

İşin eğlenceli kısmı, bileşeni DOM veya gölge DOM yapmak için yalnızca küçük bir değişiklik yapılmasıdır.

ViewEncapsulation modülünü içe aktarmamız ve bu modüldeki ShadowDom yöntemini kullanmamız gerekir.

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

entryComponents'i kullanma

Component girişi, Angular'ın zorunlu olarak yüklediği bir bileşendir. Bir giriş bileşenini NgModule'da başlatarak belirtirsiniz.

Burada, SliderComponent değerimizi @NgModule içindeki entryComponents dizisinde belirteceğiz.

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

createCustomElement modülünü içe aktarma ve kullanma

Burada, createCustomElement işlevine parametre olarak SliderComponent, değerini kullanmanız gerekir.createCustomElement@angular/elements. Ardından, slider öğesini DOM'ye kaydetmemiz gerekir.

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

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

Kaydırma çubuğunu bir DOM öğesi olarak kaydetmek için customElements.define yöntemini kullanarak tanımlayacağız.

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

Son olarak, ngDoBootstrap() yöntemini kullanarak bu özel öğeyi başlatmamız gerekir. Kodun tamamı aşağıdaki gibi görünür:

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
 ]
})
export class AppModule {
 constructor(private injector: Injector) {
   const slider = createCustomElement(SliderComponent, { injector });
   customElements.define('motley-slider', slider);
 }

 ngDoBootstrap() {}

}

Angular öğesini paketleme

package.json dosyasını yeni komutlarımızla değiştirmemiz gerekiyor. Bu nedenle, package.json dosyasındaki komut dosyası nesnesini değiştireceğiz.

Değiştirilmiş komut dosyası nesnemizi kontrol edelim:

"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"
}

Şimdi ng build & ng package komutunu çalıştırabiliriz. Son olarak, derleme komutu kullanılarak oluşturulan dist/ klasörünü sunmak için ng serve komutunu çalıştıracağız. Ayrıca, ng package komutundan elde edilen gzip bilgisini kullanabilir, ayıklayabilir ve npm module olarak yayınlayabiliriz.