Tổng quan về Component Angular

Trung Nguyen
17/07/2021
5 min read

Nội dung chính của bài viết

Component là khối xây dựng chính cho các ứng dụng Angular. Mỗi component bao gồm:

Template HTML khai báo những gì component hiển thị trên trang.
Một lớp TypeScript định nghĩa các phương thức và thuộc tính.
Bộ chọn CSS xác định cách component được sử dụng trong template.
Tùy chọn, các kiểu CSS được áp dụng cho template.

Hướng dẫn này mô tả cách tạo và cấu hình một component trong Angular.

Để xem hoặc tải xuống mã ví dụ được sử dụng trong chủ đề này, hãy xem ví dụ trực tiếp hoặc tải xuống ví dụ.

Điều kiện tiên quyết

Để tạo một component, hãy chắc chắn rằng bạn đã đáp ứng các điều kiện tiên quyết sau:

Cài đặt Angular CLI.
Tạo một không gian làm việc Angular với ứng dụng ban đầu. Nếu bạn không có một dự án, bạn có thể tạo một trang bằng lệnh ng new <project-name>, với <project-name> là tên của ứng dụng Angular của bạn.

Tạo một component

Cách dễ nhất để tạo một component là sử dụng Angular CLI. Bạn cũng có thể tạo một component theo cách thủ công.

Tạo một component bằng Angular CLI

Để tạo một component bằng Angular CLI:

Từ cửa sổ dòng lệnh, điều hướng đến thư mục chứa ứng dụng của bạn.
Chạy lệnh ng generate component <component-name>, với <component-name> là tên của component mới của bạn.

Theo mặc định, lệnh này tạo ra những thành phần sau:

Một thư mục được đặt tên theo tên component.
Một tệp component <component-name>.component.ts.
Tệp template của component <component-name>.component.html.
Một tệp CSS cho component <component-name>.component.css.
Tệp thông số kỹ thuật thử nghiệm <component-name>.component.spec.ts.

Với <component-name> là tên của component của bạn.

Bạn có thể thay đổi cách lệnh ng generate component tạo các component mới. Để biết thêm thông tin, hãy xem thêm thông tin về lệnh ng generate component trong tài liệu Angular CLI.

Tạo một component theo cách thủ công

Mặc dù Angular CLI là cách dễ nhất để tạo một component Angular, bạn cũng có thể tạo một component theo cách thủ công. Phần này mô tả cách tạo tệp component cốt lõi trong một dự án Angular hiện có.

Để tạo một component mới theo cách thủ công:

1. Điều hướng đến thư mục dự án Angular của bạn.

2. Tạo một tệp mới tên là <component-name>.component.ts.

3. Ở phần đầu tệp, hãy thêm câu lệnh import sau.

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

4. Sau câu lệnh import, hãy thêm một decorator @Component.

@Component({
})

5. Khai báo bộ chọn CSS cho component.

@Component({
  selector: 'app-component-overview',
})

Để biết thêm thông tin về cách khai báo bộ chọn CSS, hãy xem Chỉ định bộ chọn CSS của component.

6. Chi định template HTML mà component sử dụng để hiển thị giao diện người dùng. Trong hầu hết các trường hợp, template này là một tệp HTML riêng biệt.

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

Để biết thêm thông tin về cách chỉ định template của component, hãy xem Chỉ định template của component.

7. Chọn kiểu CSS cho template của component. Trong hầu hết các trường hợp, bạn chỉ định kiểu CSS cho template của component của mình trong một tệp CSS riêng biệt.

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

7. Thêm một câu lệnh class chứa mã của component.

export class ComponentOverviewComponent {

}

Chỉ định bộ chọn CSS của một component

Mọi component đều yêu cầu một bộ chọn CSS. Một bộ chọn hướng dẫn Angular khởi tạo component này ở bất cứ nơi nào nó tìm thấy thẻ tương ứng trong template HTML.

Ví dụ, hãy xem xét component hello-world.component.ts chỉ định bộ chọn của nó là app-hello-world. Bộ chọn này hướng dẫn Angular khởi tạo component này bất kỳ khi nào thẻ <app-hello-world> xuất hiện trong một template.

Chỉ định bộ chọn của một component bằng cách thêm một câu lệnh selector vào decorator @Component như sau:

@Component({
  selector: 'app-component-overview',
})

Chỉ định template của một component

Template là một khối HTML cho Angular biết cách hiển thị component trong ứng dụng của bạn. Bạn có thể chỉ định template cho component của mình theo một trong hai cách: bằng cách tham chiếu đến tệp bên ngoài hoặc trực tiếp trong component.

Để chỉ định template dưới dạng tệp bên ngoài, hãy thêm thuộc tính templateUrl vào decorator @Component như sau:

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

Để chỉ định một template trong component, hãy thêm thuộc tính template vào decorator @Component có chứa HTML mà bạn muốn sử dụng.

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})

Nếu bạn muốn template của mình trải dài nhiều dòng, bạn có thể sử dụng dấu gạch ngược (`). Ví dụ:

@Component({
  selector: 'app-component-overview',
  template: `<h1>Hello World!</h1>
             <p>This template definition spans
              multiple lines.</p>`
})

Một component Angular yêu cầu một template được chỉ định bằng cách sử dụng template hoặc templateUrl. Bạn không thể sử dụng cả hai câu lệnh này trong một component.

Khai báo kiểu CSS của một component

Bạn có thể khai báo các kiểu CSS sử dụng cho template của component theo một trong hai cách: bằng cách tham chiếu đến tệp bên ngoài hoặc trực tiếp trong component.

Để khai báo các kiểu CSS cho một component trong một tệp riêng biệt, hãy thêm một thuộc tính styleUrls vào decorator @Component như sau:

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

Để khai báo các kiểu CSS trực tiếp trong component, hãy thêm một thuộc tính styles vào decorator @Component chứa các kiểu bạn muốn sử dụng.

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

Thuộc tính styles phải là một mảng các chuỗi có chứa các khai báo CSS.

Bước tiếp theo

Để biết tổng quan về kiến trúc của các component, hãy xem Giới thiệu về component và template.
Để biết các tùy chọn bổ sung mà bạn có thể sử dụng khi tạo một component, hãy xem Component trong API Reference.
Để biết thêm thông tin về style cho component, hãy xem Style cho component.
Để biết thêm thông tin về template của component, hãy xem Cú pháp template.