Xây dựng phần tử thanh trượt hình ảnh bằng Angular – thẻ img ở dạng góc cạnh

1. Giới thiệu

Của tác giả khách mời Aayush Arora

Phần tử góc là Thành phần góc được đóng gói dưới dạng phần tử tùy chỉnh. Chúng hiện được hỗ trợ bởi Chrome, Opera và Safari và có sẵn trong các trình duyệt khác thông qua polyfills. Các yếu tố này có thể tận dụng toàn bộ Cơ sở hạ tầng góc với Giao diện góc chung và Chiến lược phát hiện thay đổi. Sau khi đăng ký, các phần tử này có thể được sử dụng trong trình duyệt.

Chương trình codelab này sẽ hướng dẫn bạn cách tạo thành phần góc của thanh trượt hình ảnh của riêng bạn và sau đó sẽ giúp bạn biến nó thành một phần tử góc để nó có thể hoạt động bên ngoài Angular Framework.

Tìm kiếm thêm? Xem bài nói chuyện tại đây .

Bạn sẽ xây dựng gì

Trong bảng mã này, bạn sẽ xây dựng phần tử thanh trượt hình ảnh bằng cách sử dụng góc. Yếu tố của bạn wi:

• hoạt động giống như một phần tử HTML trong trình duyệt
• Có thể kết hợp với bất kỳ khuôn khổ nào nói chuyện với DOM.

Những gì bạn sẽ học

• Cách tạo thành phần tùy chỉnh thanh trượt hình ảnh
• Cách chuyển đổi thành phần tùy chỉnh thanh trượt hình ảnh thành phần tử tùy chỉnh
• Cách đóng gói thành phần để nó hoạt động bên trong trình duyệt

Những gì bạn cần

• Phiên bản gần đây của angle-cli .
• Mã mẫu
• Một trình soạn thảo văn bản
• Kiến thức cơ bản về các thành phần Angular

Chương trình codelab này tập trung vào Phần tử góc. Các khái niệm và khối mã không liên quan được phủ bóng lên và được cung cấp để bạn chỉ cần sao chép và dán.

2. Thiết lập

Tải xuống mã

Nhấp vào liên kết sau để tải xuống tất cả mã cho bảng mã này:

Giải nén tệp zip đã tải xuống. Thao tác này sẽ giải nén một thư mục gốc (angle-element-codelab-master) , chứa

hai thư mục (image-slider) và (image-slider-finish) . Chúng tôi sẽ thực hiện tất cả công việc viết mã của mình trong một thư mục có tên là image-slider.

Chạy dự án

Để chạy dự án, bạn cần chạy lệnh (ng-serve) từ thư mục gốc (image-slider).

Sau khi ứng dụng được khởi động, bạn sẽ có thể thấy thông tin này:

3. Tạo thành phần tùy chỉnh Image-Slider?

Cách tạo thanh trượt hình ảnh?

Đối với thanh trượt hình ảnh này, liên kết các nút bằng cách sử dụng liên kết nhấp chuột theo góc. Chúng tôi sẽ tạo một mảng các đối tượng có chứa hình ảnh, thẻ alt, liên kết, v.v. Chúng tôi sẽ đặt những hình ảnh này bên dưới nhau trong một vùng chứa và dịch vùng chứa khi nhấp chuột.

Chúng tôi sẽ tạo thành phần thanh trượt hình ảnh và sau đó sẽ chuyển thành phần đó thành phần tử góc.

• Vùng chứa hình ảnh và tiêu đề.
• Một mảng chứa dữ liệu
• Mẫu để liên kết dữ liệu

4. Triển khai thành phần thanh trượt hình ảnh

Có nhiều cách để bắt đầu với bất kỳ dự án nào, trong trường hợp này, để giữ cho dự án của chúng tôi đơn giản nhất có thể và tập trung vào Angular Elements, chúng tôi đã cung cấp cho bạn mã cơ bản cùng với css.

Tạo mảng và dịch vụ dữ liệu

Hãy nhớ rằng sliderArray sẽ chứa:

• Phím img cho URL hình ảnh trong thanh trượt
• Một thẻ alt để cung cấp alt cho hình ảnh
• Một văn bản để cung cấp mô tả về hình ảnh

Tệp data.json đã có trong thư mục src / asset của bạn sẽ trông giống như thế này.

 sliderArray = [
 {img: 'http://bloquo.cc/img/works/1.jpg', alt: '', text: '365 Ngày tổ chức đám cưới một năm'},
 {img: 'http://bloquo.cc/img/works/2.jpg', alt: '', text: '365 Ngày tổ chức đám cưới một năm'},
 {img: 'http://bloquo.cc/img/works/3.jpg', alt: '', text: '365 Ngày tổ chức đám cưới một năm'},
 {img: 'http://bloquo.cc/img/works/4.jpg', alt: '', text: '365 Ngày tổ chức đám cưới một năm'},
 {img: 'http://bloquo.cc/img/works/5.jpg', alt: '', text: '365 Ngày tổ chức đám cưới một năm'}
];

 

Chúng tôi cần tìm nạp dữ liệu này trong thành phần của mình bằng một dịch vụ. Trong tệp data.service.ts , chúng ta sẽ viết phương thức getData () bằng cách sử dụng Mô-đun httpClient từ @ angle / common / http sẽ tìm nạp dữ liệu từ mảng mà chúng tôi đã tạo ở trên.

 
nhập {Injectable} từ '@ angle / core';
nhập {HttpClient} từ '@ angle / common / http'

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

@Injectable ({
 cung cấp trong: 'root'
})
export lớp DataService {

 phương thức khởi tạo (http: HttpClient riêng) {}

 lấy dữ liệu() {
   trả lại this.http.get (URL)
 }
}
 

Chúng tôi đã cung cấp cho bạn mẫu dịch vụ và mảng để giúp bạn tiết kiệm thời gian và đảm bảo rằng bạn đang bắt đầu trên một nền tảng vững chắc. Trong phần tiếp theo, bạn sẽ có cơ hội viết mã của riêng mình.

Tìm nạp dữ liệu từ dịch vụ dữ liệu

Chúng tôi cần nhập dịch vụ của mình vào bên trong thành phần và sau đó chúng tôi có thể đăng ký đối tượng có thể quan sát để lấy đối tượng từ data.json

Chúng tôi cần thực hiện ba bước cho việc này:

• Khởi tạo một mảng thành phần
• Đăng ký với hàm getData () có thể quan sát được
• Tạo giao diện Kết quả để kiểm tra loại dữ liệu sau khi đăng ký vào giao diện có thể quan sát được.
• Gán dữ liệu cho mảng thành phần.

Khởi tạo Mảng Thành phần

Chúng tôi sẽ khai báo và khởi tạo mảng thành phần bên trong slider.component.ts , đó là một mảng các đối tượng:

Để khai báo:

  sliderArray: object [];
 

Để khởi tạo:

  hàm tạo (dữ liệu riêng: DataService) {
 this.sliderArray = [];
}
 

Tiếp theo, chúng ta cần nhập và khởi tạo dịch vụ của mình bên trong hàm tạo

  hàm tạo (dữ liệu riêng: DataService) {}
 

Giờ đây, chúng tôi đã sẵn sàng sử dụng dịch vụ của mình và gọi các phương thức dịch vụ của chúng tôi.

Lấy dữ liệu từ Dịch vụ Dữ liệu

Để lấy dữ liệu ra khỏi dịch vụ, chúng tôi sẽ gọi phương thức getData () và đăng ký phương thức có thể quan sát được rằng nó sẽ trả về, chúng tôi cũng sẽ tạo một giao diện Kết quả, để chúng tôi có thể nhập kiểm tra xem chúng tôi có đang nhận được dữ liệu chính xác hay không.

Chúng tôi sẽ thực hiện việc này bên trong ngOnInit method:

  this.data.getData (). subscribe ((kết quả: Kết quả) = & gt; {
})
 

Gán dữ liệu cho Mảng thành phần

Cuối cùng, chúng tôi sẽ gán dữ liệu cho mảng thành phần:

  this.data.getData (). subscribe ((kết quả: Kết quả) = & gt; {
  this.sliderArray = result.sliderArray;
})
 

Khi chúng tôi nhận được dữ liệu bên trong mảng của thành phần, chúng tôi có thể liên kết mẫu của mình với dữ liệu này.

Trong slider.component.html, chúng tôi đã có một mẫu HTML. Bước tiếp theo của chúng tôi là liên kết mẫu này với sliderArray .

5. Liên kết dữ liệu với mẫu

Chúng tôi sẽ liên kết dữ liệu với mẫu bằng chỉ thị * ngFor và cuối cùng chúng tôi sẽ thêm các phép biến đổi trong mẫu để thanh trượt hoạt động.

Điều này bao gồm ba bước:

• Ràng buộc sliderArray vào mẫu
• Thêm Liên kết sự kiện cho các nút thanh trượt
• Thêm các chuyển đổi css bằng ngStyle và ngClass

Liên kết slideArray với thành phần

Chúng tôi có một vùng chứa chứa img-container , a text-container < / code> và a slider.

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

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

& lt; / div & gt;

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

  đã chọn (x) {
 this.downSelected (x);
 this.selectedIndex = x;
}

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

Những điểm cần nhớ ở đây:

• Hàm được chọn giảm sẽ làm giảm giá trị của thuộc tính biến đổi năm mươi lần chỉ số được truyền khi nhấp vào hàm được chọn .
• Logic này chuyển vùng chứa văn bản thành 100%, 50%, -50%, -100% dẫn đến bốn trạng thái khác nhau.

Thêm các chuyển đổi CSS bằng ngStyle & amp; ngClass

Ban đầu, chúng tôi đặt tất cả các hình ảnh, với độ mờ bằng 0, chúng tôi thêm một lớp đã chọn bằng cách sử dụng chỉ thị ngClass khi được chọn chỉ mục trở nên bằng với chỉ mục hình ảnh. Lớp được chọn này thêm độ mờ của một lớp vào hình ảnh để người dùng có thể nhìn thấy hình ảnh.

  & lt; div class = "img-container" * ngFor = "let i of sliderArray; let select = index;"
      [ngClass] = "{'select': select == selectIndex}" & gt;
& lt; / div & gt;
 

Sau đó, chúng tôi sẽ dịch vùng chứa văn bản theo giá trị biến đổi được tính bằng cách sử dụng hàm select () . < / p>

  & lt; div [ngStyle] = "{'biến đổi': 'translateY (' + biến đổi + '%' + ')', ' chuyển đổi ':' .8s '} "& gt;
& lt; / div & gt;
 

Sau khi thực hiện tất cả các bước này, bạn có thể tìm ra mã cuối cùng như được cung cấp bên dưới:

  & lt; div class = "container" & gt;
 & lt; div class = "img-container" * ngFor = "let i of sliderArray; let select = index;"
      [ngClass] = "{'select': select == selectIndex}" & gt;
   & lt; img src = "{{i.img}}" alt = "{{i.alt}}" & gt;
 & lt; / div & gt;

 & lt;! - & lt; / div & gt; - & gt;
 & lt; div [ngStyle] = "{'biến đổi': 'translateY (' + biến đổi + '%' + ')', 'chuyển đổi': '.8s'}" & gt;
   & lt; div class = "text-container" & gt;
     & lt; div class = "page-text" * ngFor = "let i of sliderArray; let select = index;" [ngClass] = "{'select': select == selectIndex}" & gt;
       & lt; h3 & gt; {{i.text}} & lt; / h3 & gt;
     & lt; / div & gt;
   & lt; / div & gt;
 & lt; / div & gt;

& lt; / div & gt;

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

6. Biến đổi thành phần thành phần tử góc

Quy trình này bao gồm năm bước:

• Sử dụng Shadow DOM cho Phần tử góc
• Sử dụng entryComponents
• Nhập và sử dụng mô-đun CreateCustomElement từ @ angle / Elements
• Xác định phần tử tùy chỉnh của chúng tôi
• Đang chạy phương pháp ngDoBootstrap

Sử dụng Shadow DOM cho phần tử góc

Bây giờ, thanh trượt hình ảnh của chúng tôi đang chạy, chúng tôi chỉ cần đặt nó thành Phần tử góc .

Điều thú vị là, chỉ có một thay đổi nhỏ để tạo DOM thành phần, DOM bóng.

Chúng tôi cần nhập mô-đun ViewEncapsulation và phải sử dụng phương thức ShadowDom từ nó.

 @ Thành phần ({
 bộ chọn: 'app-slider',
 templateUrl: './slider.component.html',
 styleUrls: ['./slider.component.css'],
 đóng gói: ViewEncapsulation.ShadowDom
})
 

Sử dụng entryComponents

Thành phần mục nhập là một thành phần tải theo góc cạnh. Bạn chỉ định một thành phần mục nhập bằng cách khởi động nó trong một NgModule.

Tại đây, chúng tôi sẽ chỉ định SliderComponent trong mảng entryComponents bên trong @ NgModule < / code>

  @ NgModule ({
 khai báo: [
   SliderComponent
 ],
 nhập khẩu: [
   BrowserModule,
   HttpClientModule
 ],
 entryComponents: [SliderComponent],
})
 

Nhập và sử dụng Mô-đun createCustomElement

Ở đây, chúng tôi cần sử dụng mô-đun createCustomElement từ @ angle / Elements. Bạn cần sử dụng SliderComponent, làm tham số cho hàm createCustomElement . Sau đó, chúng ta cần đăng ký slider trong DOM.

  nhập {createCustomElement} từ '@ angle / Elements';

xuất lớp AppModule {
 phương thức khởi tạo (bộ phun riêng: Injector) {
   const slider = createCustomElement (SliderComponent, {injectionor});
    }
}
 

Để đăng ký thanh trượt dưới dạng phần tử DOM, chúng tôi sẽ xác định nó bằng cách sử dụng phương thức customElements.define .

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

Cuối cùng, chúng ta phải khởi động phần tử tùy chỉnh này bằng phương thức ngDoBootstrap () . Mã hoàn chỉnh sẽ giống như sau:

  nhập {BrowserModule} từ '@ angle / platform-browser';
nhập {NgModule, Injector} từ '@ angle / core';
nhập {createCustomElement} từ '@ angle / Elements';
nhập {SliderComponent} từ './slider/slider.component';
nhập {HttpClientModule} từ "@ angle / common / http";

@NgModule ({
 khai báo: [
   SliderComponent
 ],
 nhập khẩu: [
   BrowserModule,
   HttpClientModule
 ],
 entryComponents: [SliderComponent],
})
xuất lớp AppModule {
 phương thức khởi tạo (bộ phun riêng: Injector) {
   const slider = createCustomElement (SliderComponent, {injectionor});
   customElements.define ('motley-slider', thanh trượt);
 }

 ngDoBootstrap () {}

}
 

Đóng gói Phần tử Angular

Chúng tôi cần sửa đổi package.json bằng các lệnh mới của mình, chúng tôi sẽ sửa đổi đối tượng script bên trong package.json tệp.

Hãy kiểm tra đối tượng tập lệnh đã sửa đổi của chúng tôi:

  "scripts": {
 "ng": "ng",
 "start": "ng phục vụ",
 "build": "ng build --prod --output-hashing = none",
 "package": "cat dist / my-app / {runtime, polyfills, scripts, main} .js | gzip & gt; Elements.js.gz",
 "serve": "http-server",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}
 

Bây giờ, chúng ta có thể chạy lệnh ng build & amp; ng gói và cuối cùng chúng ta sẽ chạy ng serve để phục vụ thư mục dist / được tạo bằng lệnh build. Ngoài ra, chúng ta có thể sử dụng gzip có được từ lệnh ng package , giải nén nó và có thể xuất bản nó dưới dạng mô-đun npm .