HTML nội tuyến góc

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

1. Mẫu nội tuyến
2. 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

@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

@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

@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ự

Làm cách nào để viết HTML nội tuyến trong Angular?

Tôi có thể sử dụng mẫu HTML trong Angular không?

Làm cách nào để liên kết CSS với HTML trong Angular?

Góc có HTML không?