TemplateUrls và styleUrls trong Angular là gì?
Tìm hiểu kiến thức cơ bản về kết xuất HTML và CSS, theo cách Góc cạnh.
Sử dụng Angular, bạn có thể tách các trang, hộp thoại hoặc các phần khác trong ứng dụng của mình thành các thành phần. Các thành phần trong ứng dụng Angular chủ yếu được tạo thành từ các tệp HTML, CSS và TypeScript.
Trong tệp TypeScript, bạn có thể thêm bất kỳ logic nào cần thiết để giao diện người dùng hoạt động, chẳng hạn như truy xuất dữ liệu từ máy chủ.
Bạn cũng có thể kết xuất HTML và CSS của thành phần bằng TypeScript, bằng cách chỉ định các thuộc tính mẫu và kiểu của nó. Bạn có thể sử dụng templateUrl hoặc styleUrls để liên kết đến các tệp HTML hoặc CSS bên ngoài.
Mục Lục
Mẫu và templateUrl trong Angular là gì?
Khi bạn tạo thành phần của riêng mình trong Angular, bạn có thể kết xuất HTML cho nó bằng cách sử dụng một mẫu. Có hai cách bạn có thể viết mẫu HTML của mình:
- Bạn có thể viết mã HTML của mình bên trong một mẫu trong chính tệp TypeScript.
- Bạn có thể viết mã HTML của mình trong một tệp bên ngoài và liên kết tệp TypeScript với tệp HTML này.
Trong một thành phần mới, bạn có thể đặt thuộc tính “mẫu” hoặc “templateUrl” tùy thuộc vào nơi bạn viết HTML của mình.
- Tạo một ứng dụng Góc mới.
- Trong thiết bị đầu cuối của ứng dụng của bạn, hãy chạy ng tạo thành phần lệnh để tạo một thành phần mới. Gọi thành phần mới là “about-page”.
ng generate component about-page - Trong app.component.html, thay thế mã hiện tại bằng các thẻ cho thành phần mới của bạn:
<app-about-page></app-about-page> - Mở about-page.component.ts tập tin. Nếu bạn không có nhiều mã HTML, bạn có thể sử dụng thuộc tính mẫu để viết trực tiếp bên trong tệp TypeScript. Thay thế trình trang trí @Component bằng cách sau:
@Component({
selector: 'app-about-page',
template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
}) - Nếu bạn muốn bao gồm một mẫu có nhiều dòng, thay vào đó, bạn có thể sử dụng dấu ngoặc kép:
@Component({
selector: 'app-about-page',
template: `<h2>About Page</h2>
<br>
<p>This is rendering the HTML from the TypeScript file!</p>`
}) - Trong thiết bị đầu cuối, nhập phục vụ để biên dịch mã của bạn và chạy nó trong trình duyệt web. Mở ứng dụng của bạn tại http://localhost:4200/. Mã HTML của bạn từ tệp TypeScript sẽ hiển thị trên trang.
- Trong about-page.component.ts, hãy thay thế “mẫu” bằng “templateUrl”. Bao gồm liên kết đến tệp HTML bên ngoài của thành phần. Bạn có thể sử dụng “templateUrl” nếu bạn có mã HTML phức tạp hơn yêu cầu tệp riêng.
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html'
}) - Thêm một số mã HTML vào about-page.component.html tập tin:
<h2>About Page</h2>
<p>This is rendering the HTML from the HTML file!</p> - Quay lại trình duyệt của bạn hoặc chạy lại ng phục vụ để biên dịch lại mã của bạn. Mở ứng dụng của bạn tại http: // localhost: 4200 /. Trình duyệt hiện hiển thị HTML từ about-page.component.html tập tin.
Phong cách và styleUrl trong Angular là gì?
Tương tự với HTML, bạn có thể sử dụng “style” hoặc “styleUrls” tùy thuộc vào nơi bạn chọn để lưu trữ CSS của mình.
Bạn có thể bao gồm CSS trong mã TypeScript nếu bạn có các khai báo CSS rất đơn giản. Nếu không, bạn có thể sử dụng “styleUrls” để liên kết tệp TypeScript với CSS bên ngoài có chứa nhiều kiểu hơn.
- Trong ứng dụng Angular đã tạo trước đây của bạn, hãy mở about-page.component.ts tập tin. Thêm thuộc tính “kiểu” vào thành phần. Bên trong “kiểu”, thêm kiểu CSS của bạn cho trang:
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styles: ['h2 {color:red}','p {color:green}']
}) - Trong thiết bị đầu cuối, gõ phục vụ để biên dịch mã của bạn và chạy nó trong trình duyệt web. Mở ứng dụng của bạn tại http://localhost:4200/ để xem kiểu dáng được chỉ định trong tệp TypeScript.
- Nếu bạn có nhiều CSS, hãy sử dụng “styleUrls” thay vì “styles”, để liên kết tệp TypeScript với tệp CSS bên ngoài. Trong about-page.component.tsthay thế trình trang trí @Component bằng trình trang trí sau:
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styleUrls: ['./about-page.component.css']
}) - Thêm một số kiểu dáng CSS vào about-page.component.css:
h2 {
color: blue
}
p {
color: darkorange
} - Quay lại trình duyệt của bạn hoặc chạy lại phục vụ để biên dịch lại mã của bạn. Mở ứng dụng của bạn tại http://localhost:4200/ để xem các kiểu được sử dụng từ tệp CSS bên ngoài.
Hiển thị HTML của một thành phần trong Angular
Bây giờ bạn đã biết các cách khác nhau để hiển thị nội dung HTML và CSS của mình trong ứng dụng Angular. Bạn có thể xác định phương pháp tiếp cận bạn muốn sử dụng dựa trên độ phức tạp của HTML và CSS của bạn.
Nếu quan tâm, bạn có thể khám phá cách truyền dữ liệu giữa các tệp HTML và TypeScript của một thành phần Góc.