Tổng quan về Component Angular
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ặctemplateUrl
. 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.