Trong chương trước, bạn đã tạo một mẫu HTML cho thành phần. Tại đây, bạn sẽ tìm hiểu chi tiết về mẫu HTML
Mẫu HTML không có gì khác ngoài mã HTML thông thường có thêm cú pháp cụ thể của Angular để giao tiếp với lớp thành phần
Mẫu HTML = HTML + Chỉ thị và ràng buộc góc
API góc diễn giải mẫu HTML của một thành phần, tạo HTML và hiển thị nó
Bạn có thể tạo một mẫu HTML trong một thành phần theo hai cách
- Mẫu nội tuyến
- Mẫu được liên kết
Mẫu nội tuyến
Mẫu HTML nội tuyến cho một thành phần được xác định bằng cách sử dụng cấu hình mẫu trong trình trang trí @Component
, như được hiển thị bên dưới
Nó có thể là một mẫu dòng đơn được bao bọc bên trong dấu ngoặc kép hoặc dấu ngoặc đơn
Ví dụ. Mẫu nội tuyến
Sao chép@Component[{
selector: "app-greet",
template: "Enter Your Name: "
}]
Nó cũng có thể là một mẫu nhiều dòng được bao bọc bên trong backticks char `
Ví dụ. Mẫu nhiều dòng
Sao chép@Component[{
selector: "app-greet",
template: `
Enter Your Name:
Greet Me!
`
}]
Mẫu được liên kết
Một thành phần có thể có một tệp HTML riêng để bao gồm mẫu HTML của một thành phần. Sử dụng tham số templateUrl
để khai báo đường dẫn của tệp mẫu HTML, như hình bên dưới
Ví dụ. Mẫu được liên kết
Sao chép@Component[{
selector: "app-greet",
templateUrl: "./mycomponent.component.html"
}]
Đó là một thực hành tốt nhất để có một riêng. tệp html cho một mẫu. Sẽ dễ dàng làm việc với các thẻ HTML và cũng như duy trì nó
Vì vậy, đây là cách đặt các mẫu nội tuyến và kiểu nội tuyến, đây là sở thích của tôi để tạo các ứng dụng Angular
Khi các ứng dụng mở rộng quy mô, bạn có xu hướng gặp phải tình trạng quá tải cấu trúc tệp và thư mục, vì vậy tôi giữ mọi thứ ở mức tối thiểu nhất có thể với một thành phần đẹp mắt trông như thế này
@Component[{
template: `
Hello World
`,
styles: `
div { background: pink; }
`
}]
export class AppComponent {}
Tôi thích khả năng chỉ 'nhìn thấy' mọi thứ trong một tệp, tôi không thích bối cảnh chuyển đổi giữa các tệp *.ts
và *.html
Vì logic thành phần của tôi đã có sẵn ở đó, tôi chỉ muốn xem cách tôi cắm nó vào mẫu
“Nhưng nếu hồ sơ quá dài thì sao?”. Chắc chắn, một số thành phần trở nên lớn hơn những thành phần khác, nhưng theo nguyên tắc, hãy cố gắng giữ chúng càng nhỏ càng tốt
Bạn cũng có trong mỗi tệp, đây là thứ tôi cũng sử dụng
Vì vậy, với những suy nghĩ và cảm xúc của tôi, làm thế nào bạn cũng có thể áp dụng cùng một thực hành?
Bạn có thể thêm phần này vào một dự án Angular CLI hiện có, nhưng trước tiên, đây là cách tạo một dự án mới với nó làm mặc định
ng new pizzas --inline-style=true --inline-template=true
Nếu bạn đang tạo các thành phần mới, bạn sẽ muốn giữ mọi thứ nhất quán và thêm phần này vào lược đồ angular.json
của mình
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"your_project_name": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true,
"inlineStyle": true,
}
},
...
}
...
}
...
}
Sau đó, bất kỳ thành phần mới nào cũng tuân theo quy tắc này và bạn sẽ có một cấu trúc thư mục và thư mục ít lộn xộn hơn
Nếu bạn đang tạo các thành phần độc lập thì bạn cũng có thể muốn bật luôn độc lập theo cách tương tự