Component là khối xây dựng chính cho các ứng dụng Angular. Mỗi component bao gồm:
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ụ.
Để 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:
ng new <project-name>
, với <project-name>
là tên của ứng dụng Angular của bạn.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:
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:
<component-name>.component.ts
.<component-name>.component.html
.<component-name>.component.css
.<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.
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 {
}
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',
})
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ụngtemplate
hoặctemplateUrl
. Bạn không thể sử dụng cả hai câu lệnh này trong 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ạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.
Trong hướng dẫn này, bạn sẽ tìm hiểu về không dan làm việc và cấu trúc file dự án ứng dụng, dự án thư viện của Angular.
Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.