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 với IIHS trong Angular.

  • Cách trở thành nhà phát triển Angular vào năm 2022

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ể hiển thị HTML và CSS của một phần tử bằng TypeScript, bằng cách chỉ định các mẫu và thuộc tính 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ẫ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ể hiển thị HTML cho thành phần đó bằng 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 bên trong một mẫu trong chính tệp TypeScript.
  • Bạn có thể viết mã HTML trong tệp bên ngoài và liên kết tệp TypeScript với tệp HTML này.

Trong phần tử 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 mã HTML.

  1. Tạo một ứng dụng Góc mới.
  2. Trong thiết bị đầu cuối của ứng dụng, hãy chạy lệnh ng tạo thành phần để tạo thành phần mới. Gọi thành phần mới là “about-page”.ng tạo thành phần about-page
  3. Trong app.component.html, thay thế mã hiện tại bằng các thẻ cho phần tử mới:
  4. Mở tệp about-page.component.ts. 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:@Component({ selector: ‘app-about-page’, template: ‘

    Giới thiệu Trang

    Đây là kết xuất HTML từ tệp TypeScript!< /p>‘ })

  5. Nếu bạn muốn bao gồm một mẫu có nhiều dòng, bạn có thể sử dụng dấu ngoặc kép:@Component({ selector: ‘app-about-page’, template: `

    Giới thiệu Trang

    < p>Đây là kết xuất HTML từ tệp TypeScript!

    ` })

  6. Trong thiết bị đầu cuối, nhập ng 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.

  7. Trong about-page.component.ts , thay thế “mẫu” bằng “mẫuUrl”. Bao gồm một 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 cần có tệp riê[email protected]({ selector: ‘app-about-page’, templateUrl: ‘./about-page.component.html’ })
  8. Thêm một số mã HTML vào tệp about-page.component.html :

    Giới thiệu Trang

    Đây là kết xuất HTML từ tệp HTML!

  9. 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 mã. Mở ứng dụng của bạn tại http://localhost:4200/. Trình duyệt hiện hiển thị HTML từ tệp about-page.component.html .

Phong cách 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 vào nơi bạn chọn lưu trữ CSS của mình.

Bạn có thể đưa CSS vào mã TypeScript của mình nếu bạn có các khai báo 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 kiểu hơn.

  1. 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 phần tử. Bên trong “kiểu”, hãy thêm kiểu CSS của bạn cho trang:@Component({ bộ chọn: ‘app-about-page’, templateUrl: ‘./about-page.component.html’, kiểu: [‘h2 {color:red}’,’p {color:green}’]
    })
  2. Trong thiết bị đầu cuối, nhập ng 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 được chỉ định trong tệp TypeScript.

  3. Nếu bạn có nhiều CSS, hãy sử dụng “styleUrls” thay vì “style” để liên kết tệp TypeScript với tệp CSS bên ngoài. Trong about-page.component.ts , thay thế trình trang trí @Component bằng:@Component({ selector: ‘app-about-page’, templateUrl: ‘./about-page.component.html’, styleUrls: [‘./about-page.component.css’]
    })
  4. Thêm một số kiểu CSS vào about-page.component.css :h2 { color: blue } p { color: darkorange }
  5. Quay lại trình duyệt 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 kiểu được sử dụng từ tệp CSS bên ngoài.

Kết xuất 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 nên sử dụng phương pháp nào dựa trên độ phức tạp của HTML và CSS của mình.

Văn Nguyễn

Dịch từ: https://www.makeuseof.com/angular-templateurls-styleurls/

Bạn thấy bài viết templateUrls và styleUrls trong Angular là gì? có khắc phục đươc vấn đề bạn tìm hiểu ko?, nếu ko hãy comment góp ý thêm về templateUrls và styleUrls trong Angular là gì? bên dưới để Trường Cao đẳng Nghề Khách sạn Du lịch Quốc tế IMPERIAL có thể thay đổi & cải thiện nội dung tốt hơn cho các bạn nhé! Cám ơn bạn đã ghé thăm Website: imperialhotelschool.edu.vn của Trường Cao đẳng Nghề Khách sạn Du lịch Quốc tế IMPERIAL

Nhớ để nguồn: templateUrls và styleUrls trong Angular là gì? của website imperialhotelschool.edu.vn

Chuyên mục: Kiến thức chung

Xem thêm bài viết hay:  Liên từ trong tiếng Anh – Tổng hợp các liên từ trong tiếng Anh

Viết một bình luận