Sử dụng Angular, bạn có thể tách các trang (page), hộp thoại (dialog) 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 file HTML, CSS và TypeScript.
Trong file 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ột máy chủ.
Bạn cũng có thể render HTML và CSS của thành phần với TypeScript, bằng cách chỉ định các template và thuộc tính style của nó. Bạn có thể sử dụng templateUrl hoặc styleUrls để liên kết đến các file HTML hoặc CSS bên ngoài.
Template 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ể render HTML cho thành phần đó bằng template. Có hai cách bạn có thể viết template HTML của mình:
- Bạn có thể viết code HTML bên trong một template trong chính tệp TypeScript.
- Bạn có thể viết code HTML 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 “template” hoặc “templateUrl” tùy thuộc vào nơi bạn viết code HTML của mình.
- Tạo một ứng dụng Angular mới .
- Trong terminal của ứng dụng, hãy chạy lệnh ng generate component để 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ế code hiện tại bằng các tag cho thành phần mới:
<app-about-page></app-about-page> - Mở tệp about-page.component.ts. Nếu bạn không có nhiều code HTML, bạn có thể sử dụng thuộc tính template để viết trực tiếp bên trong tệp TypeScript. Thay thế decorator @Component bằng:
@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 template có nhiều dòng,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 terminal, nhập ng serve để 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ừ file TypeScript sẽ hiển thị trên trang.
- Trong about-page.component.ts , hãy thay thế “template” 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ó code 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ố code HTML vào tệp about-page.component.html :
<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 serve để biên dịch lại code. Mở ứng dụng của bạn tại http://localhost:4200/. Trình duyệt hiện hiển thị HTML từ file about-page.component.html .
Style và styleUrl trong Angular là gì?
Tương tự như HTML, bạn có thể sử dụng “style” hoặc “styleUrls” tùy thuộc xem bạn chọn lưu trữ CSS của mình ở đâu.
Bạn có thể bao gồm CSS trong mã TypeScript nếu bạn có các declaration CSS đơn giản. Nếu không, bạn có thể sử dụng “styleUrls” để liên kết tệp TypeScript với một CSS bên ngoài chứa nhiều style hơn.
- Trong ứng dụng Angular đã tạo trước đó, hãy mở tệp about-page.component.ts . Thêm thuộc tính “style” vào thành phần. Bên trong “style”, thêm style 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 terminal, nhập ng serve để 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 style được chỉ định trong tệp TypeScript.
- Nếu bạn có nhiều CSS, hãy sử dụng “styleUrls” thay cho “style” để liên kết tệp TypeScript với tệp CSS bên ngoài. Trong about-page.component.ts , hãy thay thế decorator @Component bằng:
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styleUrls: ['./about-page.component.css'] }) - Thêm một số style CSS vào about-page.component.css :
h2 {
color: blue
}
p {
color: darkorange
} - Quay lại trình duyệ hoặc chạy lại ng serve để biên dịch lại mã. Mở ứng dụng tại http://localhost:4200/ để xem các style được sử dụng từ tệp CSS bên ngoài.
Render 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 trong ứng dụng Angular. Bạn có thể quyết định sử dụng cách tiếp cận nào dựa trên độ phức tạp của HTML và CSS của bạn.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/angular-templateurls-styleurls/
Bình luận (0
)