Master/Detail Components

Hiện tại, HeroesComponent hiển thị cả danh sách các hero và các chi tiết của hero được chọn.

Giữ tất cả các tính năng trong 1 component khi ứng dụng phát triển sẽ không thể duy trì được. Bạn sẽ muốn tách các component lớn thành các component phụ nhỏ hơn, mỗi component tập trung vào một nhiệm vụ hoặc quy trình công việc cụ thể.

Trong trang này, bạn sẽ thực hiện bước đầu tiên theo hướng đó bằng cách di chuyển các chi tiết hero vào một HeroDetailComponent riêng biệt, có thể tái sử dụng.

HeroesComponent sẽ chỉ trình bày danh sách các hero. HeroDetailComponent sẽ trình bày chi tiết về một hero được chọn.

Tạo HeroDetailComponent

Sử dụng Angular CLI để tạo ra một thành phần mới có tên là hero-detail.
ng generate component hero-detail

Lệnh dàn như sau:

  • Tạo một thư mục src / app / hero-chi tiết.

Trong thư mục đó có bốn tệp được tạo:

  • Một tệp CSS cho các style thành phần.
  • Một tệp HTML cho mẫu thành phần.
  • Một tệp TypeScript với một lớp thành phần có tên HeroDetailComponent.
  • Một tệp thử nghiệm cho lớp HeroDetailComponent.

Lệnh này cũng thêm HeroDetailComponent như một khai báo trong declaration @NgModule của tệp src / app / app.module.ts.

Viết mẫu template

Cắt HTML cho chi tiết hero từ dưới cùng của mẫu HeroesComponent và dán nó lên bảng mẫu được tạo trong mẫu HeroDetailComponent

HTML đã dán đề cập đến một selectedHero . HeroDetailComponent mới có thể giới thiệu bất kỳ hero nào, không chỉ là một hero được chọn. Vì vậy, thay thế "selectedHero" bằng "hero" ở mọi nơi trong mẫu.

Khi bạn hoàn thành, mẫu HeroDetailComponent sẽ trông như thế này:

// src/app/hero-detail/hero-detail.component.html

{{hero.name | uppercase}} Details

id: {{hero.id}}
name:

Thêm thuộc tính @Input() hero

Mẫu HeroDetailComponent liên kết với thuộc tính hero của thành phần thuộc loại Hero. Mở tệp lớp HeroDetailComponent và nhập biểu tượng Hero.
// src/app/hero-detail/hero-detail.component.ts (import Hero)

import { Hero } from '../hero';

Thuộc tính hero phải là thuộc tính Đầu vào, được chú thích bằng decorator @Input (), vì HeroesComponent bên ngoài sẽ liên kết với nó như thế này.

Sửa đổi câu lệnh import @ angular / core để bao gồm ký hiệu Input.

src/app/hero-detail/hero-detail.component.ts (import Input)

import { Component, OnInit, Input } from '@angular/core';
 
Thêm một thuộc tính hero, trước decorator @Input ()
@Input() hero: Hero;
 
Đó là thay đổi duy nhất bạn nên thực hiện đối với lớp HeroDetailComponent. Không có nhiều tài sản. Không có logic trình bày. Thành phần này chỉ đơn giản nhận một đối tượng hero thông qua tài sản hero của nó và hiển thị nó.

Hiển thị HeroDetailComponent

HeroesComponent vẫn là chế độ xem master/detail.

Nó được sử dụng để tự hiển thị các chi tiết hero, trước khi bạn cắt phần đó của mẫu. Bây giờ nó sẽ ủy quyền cho HeroDetailComponent.

Hai thành phần sẽ có mối quan hệ cha/con . HeroesComponent gốc sẽ điều khiển HeroDetailComponent con bằng cách gửi cho nó một hero mới để hiển thị bất cứ khi nào người dùng chọn một hero từ danh sách.

Bạn sẽ không thay đổi lớp HeroesComponent nhưng bạn sẽ thay đổi mẫu của nó.

Cập nhật mẫu HeroesComponent

Công cụ chọn HeroDetailComponent là 'app-hero-detail'. Thêm phần tử ở gần cuối mẫu HeroesComponent, trong đó chế độ xem chi tiết hero thường sử dụng.
Liên kết các HeroesComponent.selectedHero với thuộc tính hero của nguyên tố như thế này.
// heroes.component.html (HeroDetail binding)

[hero]="selectedHero" là một ràng buộc thuộc tính Angular.

Đó là liên kết dữ liệu một chiều từ thuộc tính selectedHero của HeroesComponent với thuộc tính hero của thành phần đích, ánh xạ tới thuộc tính hero của HeroDetailComponent.

Bây giờ khi người dùng nhấp vào một hero trong danh sách, selectedHero sẽ thay đổi. Khi selectedHerothay đổi, ràng buộc thuộc tính cập nhật hero và HeroDetailComponent hiển thị hero mới.

Mẫu HeroesComponent được sửa đổi sẽ trông như thế này:

// heroes.component.html

My Heroes

  • {{hero.id}} {{hero.name}}

Trình duyệt làm mới và ứng dụng bắt đầu hoạt động trở lại như trước đây.

Những gì đã thay đổi?

Như trước đây, bất cứ khi nào người dùng nhấp vào tên hero, chi tiết hero sẽ xuất hiện bên dưới danh sách hero. Bây giờ HeroDetailComponent đang trình bày những chi tiết đó thay vì HeroesComponent.

Tái cấu trúc HeroesComponent ban đầu thành hai thành phần mang lại lợi ích, cả hiện tại và trong tương lai:

  1. Bạn đã đơn giản hóa HeroesComponent bằng cách giảm trách nhiệm của nó.
  2. Bạn có thể phát triển HeroDetailComponent thành một trình soạn thảo hero có mà không cần chạm vào HeroesComponent gốc.
  3. Bạn có thể phát triển HeroesComponent mà không cần chạm vào chế độ xem chi tiết hero.
  4. Bạn có thể sử dụng lại HeroDetailComponent trong mẫu của một số thành phần trong tương lai.

Đánh giá code cuối cùng 

Ứng dụng của bạn sẽ giống như ví dụ trực tiếp.

Tổng kết

  • Bạn đã tạo một HeroDetailComponent riêng biệt, có thể tái sử dụng.
  • Bạn đã sử dụng một ràng buộc thuộc tính để cung cấp cho cha HeroesComponent quyền kiểm soát đối với HeroDetailComponent con.
  • Bạn đã sử dụng trình decorator @Input để làm cho thuộc tính anh hùng có sẵn để ràng buộc bởi HeroesComponent bên ngoài.

 Nguồn:https://angular.io/tutorial/toh-pt3

 Dịch bởi Vũ Đức Nguyên