Biên tập hero

Ứng dụng này hiện có một tiêu đề cơ bản. Tiếp theo, bạn sẽ tạo một thành phần mới để hiển thị thông tin anh hùng và đặt thành phần đó vào vỏ ứng dụng.

Tạo component heroes

Sử dụng Angular CLI, tạo ra một thành phần mới có tên là heroes
ng generate component heroes

CLI tạo một thư mục mới, src / app / Heroes / và tạo bốn tệp của HeroesComponent.

Tệp lớp HeroesComponent như sau:

//app/heroes/heroes.component.ts (initial version)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Bạn luôn import biểu tượng Thành phần từ thư viện lõi Angular và chú thích lớp thành phần với @Component.

@Component là một hàm trang trí chỉ định siêu dữ liệu Angular cho thành phần.CLI đã tạo ba thuộc tính siêu dữ liệu:

  1. selector: Bộ chọn phần tử CSS của thành phần
  2. templateUrl: Phục hồi vị trí của tệp mẫu của thành phần.
  3. styleUrls: vị trí của các kiểu CSS riêng của thành phần.

Bộ chọn phần tử CSS, 'app-heroes', khớp với tên của phần tử HTML xác định thành phần này trong mẫu của thành phần cha mẹ.

NgOnInit là một  lifecycle hook. Angular gọi ngOnInit ngay sau khi tạo một thành phần. Đó là một nơi tốt để đặt logic khởi tạo.

Luôn xuất lớp thành phần để bạn có thể nhập nó ở nơi khác ... như trong AppModule.

Thêm 1 thuộc tính

Thêm 1 thuộc tính hero vào heroescomponent với tên :"Windstorm"

//heroes.component.ts (hero property)

hero = 'Windstorm';

 Hiển thị hero

Mở tệp mẫu Heroes.component.html. Xóa văn bản mặc định được tạo bởi Angular CLI và thay thế nó bằng một ràng buộc dữ liệu với thuộc tính anh hùng hero mới.

//heroes.component.html

{{hero}}

Hiển thị HeroesComponent

Để hiển thị HeroesComponent, bạn phải thêm nó vào mẫu của AppComponent shell. Hãy nhớ rằng app-heroes là bộ chọn thành phần cho HeroesComponent. Vì vậy, hãy thêm phần tử <app-heroes> vào tệp mẫu AppComponent, ngay bên dưới tiêu đề.
// src/app/app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

Giả sử rằng lệnh ng serve CLI vẫn đang chạy, trình duyệt sẽ làm mới và hiển thị cả tiêu đề ứng dụng và tên anh hùng.

Tạo 1 class hero

Một hero thực sự còn hơn cả một cái tên.
Tạo một class Hero trong tệp riêng của nó trong thư mục src / app. Cung cấp cho nó thuộc tính id và tên.

//src/app/hero.ts

export class Hero {
  id: number;
  name: string;
}

Quay trở lại class HeroesComponent và nhập class Hero.
Tái cấu trúc những thuộc tính trong hero thuộc loại Hero. Khởi tạo nó với id là 1 và name: Windstorm.

Tệp lớp HeroesComponent đã sửa đổi sẽ trông như thế này:

// src/app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

Trang không còn hiển thị đúng vì bạn đã thay đổi hero từ một chuỗi thành một đối tượng.

Hiển thị object hero

Cập nhật liên kết trong mẫu để thông báo tên của hero và hiển thị cả id và tên trong bố cục chi tiết như thế này:

//heroes.component.html (HeroesComponent's template)

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

Trình duyệt làm mới và hiển thị thông tin của hero.

Định dạng với UppercasePipe.

Sửa đổi ràng buộc hero.name như thế này.

<h2>{{hero.name | uppercase}} Details</h2>

Trình duyệt làm mới và bây giờ tên của anh hùng được hiển thị bằng chữ in hoa.

Chữ hoa trong liên kết nội suy, ngay sau toán tử pipe (|), kích hoạt UppercasePipe tích hợp.

Pipe là một cách tốt để định dạng chuỗi, số tiền, ngày và dữ liệu hiển thị khác. Tàu góc với một số pipe tích hợp và bạn có thể tự tạo.

Chỉnh sửa hero

Người dùng sẽ có thể chỉnh sửa tên hero trong hộp văn bản <input>.

Cả hộp văn bản sẽ hiển thị thuộc tính tên của anh hùng và cập nhật thuộc tính đó theo kiểu người dùng. Điều đó có nghĩa là luồng dữ liệu từ lớp thành phần ra màn hình và từ màn hình trở lại lớp.

Để tự động hóa luồng dữ liệu đó, hãy thiết lập liên kết dữ liệu hai chiều giữa phần tử biểu mẫu <input> và thuộc tính hero.name.

Ràng buộc 2 chiều

Tái cấu trúc khu vực chi tiết trong mẫu HeroesComponent để nó trông như thế này
// src/app/heroes/heroes.component.html (HeroesComponent's template)

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
</div>
 
[(ngModel)] là cú pháp ràng buộc dữ liệu hai chiều của Angular.
Ở đây, nó liên kết thuộc tính hero.name với hộp văn bản HTML để dữ liệu có thể chảy theo cả hai hướng: từ thuộc tính hero.name đến hộp văn bản và từ hộp văn bản trở lại hero.name.

FormsModule bị thiếu

Lưu ý rằng ứng dụng đã ngừng hoạt động khi bạn thêm [(ngModel)].

Để xem lỗi, hãy mở các công cụ phát triển trình duyệt và tìm trong bảng điều khiển để biết thông báo như:

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

Mặc dù ngModel là một chỉ thị Angular hợp lệ, nhưng nó không có sẵn theo mặc định. Nó thuộc về FormsModule tùy chọn và bạn phải chọn tham gia sử dụng nó.

AppModule

Angular cần biết các phần của ứng dụng của bạn khớp với nhau như thế nào và các tệp và thư viện khác mà ứng dụng yêu cầu. Thông tin này được gọi là siêu dữ liệu

Một số siêu dữ liệu nằm trong @Component decorators  mà bạn đã thêm vào các class component của mình. Siêu dữ liệu quan trọng khác là trong @NgModule decorator.

 @NgModule decorator quan trọng nhất chú thích class AppModule cấp cao nhất.

Angular CLI đã tạo ra một class AppModule trong src / app / app.module.ts khi nó tạo dự án. Đây là nơi bạn chọn tham gia vào FormsModule.

Import FormsModule

Mở AppModule (app.module.ts) và import biểu tượng FormsModule từ thư viện @ angular / Forms.

// app.module.ts (FormsModule symbol import)

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

Sau đó, thêm FormsModule vào mảng nhập siêu dữ liệu của @NgModule, chứa danh sách các mô-đun bên ngoài mà ứng dụng cần

// app.module.ts ( @NgModule imports)

imports: [
  BrowserModule,
  FormsModule
],

Khi trình duyệt làm mới, ứng dụng sẽ hoạt động trở lại. Bạn có thể chỉnh sửa tên của anh hùng và xem các thay đổi được phản ánh ngay lập tức trong <h2> phía trên hộp văn bản.

Declare HeroesComponent

Mỗi thành phần phải được khai báo trong chính xác một NgModule.

Bạn đã không xác nhận HeroesComponent. Vậy tại sao ứng dụng hoạt động?

Nó hoạt động vì CLI Angular đã khai báo HeroesComponent trong AppModule khi nó tạo ra thành phần đó.

Mở src / app / app.module.ts và tìm HeroesComponent được import gần đầu.

import { HeroesComponent } from './heroes/heroes.component';

HeroesComponent được khai báo trong mảng @ NgModule.declarations

declarations: [
  AppComponent,
  HeroesComponent
],

Lưu ý rằng AppModule khai báo cả hai thành phần ứng dụng, AppComponent và HeroesComponent.

Đá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 đã sử dụng CLI để tạo HeroesComponent thứ hai.
  • Bạn đã hiển thị HeroesComponent bằng cách thêm nó vào hệ vỏ AppComponent.
  • Bạn đã áp dụng UppercasePipe để định dạng tên.
  • Bạn đã sử dụng liên kết dữ liệu hai chiều với chỉ thị ngModel.
  • Bạn đã học về AppModule.
  • Bạn đã nhập FormsModule trong AppModule để Angular nhận ra và áp dụng lệnh ngModel.
  • Bạn đã học được tầm quan trọng của việc khai báo các thành phần trong AppModule và đánh giá cao rằng CLI đã khai báo nó cho bạn.

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

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