Trong trang này, bạn sẽ tạo một thành phần với danh sách các anh hùng. Bạn sẽ hiển thị danh sách tên anh hùng và hiển thị thông báo có điều kiện bên dưới danh sách

Giao diện người dùng cuối cùng trông như thế này

nội dung

• .
• .
• .

Trình diễn tất cả các cú pháp và đoạn mã được mô tả trong trang này

Hiển thị các thuộc tính thành phần với phép nội suy

Cách dễ nhất để hiển thị thuộc tính thành phần là liên kết tên thuộc tính thông qua phép nội suy. Với phép nội suy, bạn đặt tên thuộc tính trong mẫu xem, được đặt trong dấu ngoặc nhọn kép. {{myHero}}

Thực hiện theo các hướng dẫn thiết lập để tạo một dự án mới có tên

Sau đó sửa đổi tệp bằng cách thay đổi mẫu và phần thân của thành phần

Khi bạn hoàn thành, nó sẽ trông như thế này

src/ứng dụng/ứng dụng. thành phần. ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

{{title}}

My favorite hero is: {{myHero}}

` }) export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm'; }

Bạn đã thêm hai thuộc tính vào thành phần trống trước đây. ________1 và 2_______

Mẫu đã sửa đổi hiển thị hai thuộc tính thành phần bằng phép nội suy dấu ngoặc kép

template: `

{{title}}

My favorite hero is: {{myHero}}

`

Mẫu là một chuỗi nhiều dòng trong ECMAScript 2015 backticks (`). Dấu gạch ngược (`)—không phải là ký tự giống như một trích dẫn đơn (')—cho phép bạn soạn một chuỗi trên nhiều dòng, giúp HTML dễ đọc hơn

Angular tự động lấy giá trị của các thuộc tính title và myHero từ thành phần và chèn các giá trị đó vào trình duyệt. Góc cập nhật màn hình khi các thuộc tính này thay đổi

Chính xác hơn, việc hiển thị lại xảy ra sau một số loại sự kiện không đồng bộ liên quan đến chế độ xem, chẳng hạn như thao tác gõ phím, hoàn thành hẹn giờ hoặc phản hồi đối với yêu cầu HTTP

Lưu ý rằng bạn không gọi new để tạo một thể hiện của lớp AppComponent. Angular đang tạo một ví dụ cho bạn. Làm sao?

CSS selector trong trình trang trí title0 chỉ định một phần tử có tên là title1. Phần tử đó là một trình giữ chỗ trong phần nội dung của tệp title2 của bạn

src/chỉ mục. html (cơ thể)

đang tải.

Khi bạn khởi động với lớp AppComponent (trong), Angular tìm kiếm một title1 trong title2, tìm thấy nó, khởi tạo một thể hiện của AppComponent và hiển thị nó bên trong thẻ title1

Bây giờ hãy chạy ứng dụng. Nó sẽ hiển thị tiêu đề và tên anh hùng

Một vài phần tiếp theo xem xét một số lựa chọn mã hóa trong ứng dụng

Mẫu nội tuyến hoặc tệp mẫu?

Bạn có thể lưu trữ mẫu thành phần của mình ở một trong hai nơi. Bạn có thể xác định nó nội tuyến bằng cách sử dụng thuộc tính title8 hoặc bạn có thể xác định mẫu trong một tệp HTML riêng và liên kết với nó trong siêu dữ liệu thành phần bằng cách sử dụng thuộc tính myHero0 của trình trang trí title0

Sự lựa chọn giữa HTML nội tuyến và HTML riêng biệt là vấn đề về sở thích, hoàn cảnh và chính sách của tổ chức. Ở đây, ứng dụng sử dụng HTML nội tuyến vì mẫu nhỏ và bản trình diễn đơn giản hơn mà không cần tệp HTML bổ sung

Trong cả hai kiểu, các liên kết dữ liệu mẫu có cùng quyền truy cập vào các thuộc tính của thành phần

Khởi tạo hoặc khởi tạo biến?

Mặc dù ví dụ này sử dụng phép gán biến để khởi tạo các thành phần, thay vào đó, bạn có thể khai báo và khởi tạo các thuộc tính bằng hàm tạo

src/ứng dụng/ứng dụng-ctor. thành phần. ts (lớp)

xuất lớp AppCtorComponent { title. chuỗi; . chuỗi; . title = 'Chuyến đi của các anh hùng'; . myHero = 'Gió';

Ứng dụng này sử dụng kiểu "gán biến" ngắn gọn hơn đơn giản cho ngắn gọn

Hiển thị một thuộc tính mảng với *ngFor

Để hiển thị danh sách các anh hùng, hãy bắt đầu bằng cách thêm một mảng tên anh hùng vào thành phần và xác định lại myHero là tên đầu tiên trong mảng

src/ứng dụng/ứng dụng. thành phần. ts (lớp)

lớp xuất khẩu AppComponent { title = 'Chuyến du hành của các anh hùng'; . anh hùng[0];

Bây giờ, hãy sử dụng chỉ thị myHero2 trong mẫu để hiển thị từng mục trong danh sách myHero3

src/ứng dụng/ứng dụng. thành phần. ts (mẫu)

template: `

{{title}}

My favorite hero is: {{myHero}}

Heroes:

• {{ hero }}

`

Giao diện người dùng này sử dụng danh sách không có thứ tự HTML với các thẻ myHero4 và myHero5. myHero6 trong phần tử myHero5 là chỉ thị "bộ lặp" của Angular. Nó đánh dấu phần tử myHero5 đó (và các phần tử con của nó) là "mẫu lặp lại"

{{ anh hùng }}

Đừng quên dấu hoa thị (*) ở đầu trong myHero6. Nó là một phần thiết yếu của cú pháp. Để biết thêm thông tin, xem trang

Lưu ý `0 trong hướng dẫn trích dẫn kép myHero2; . Đọc thêm về các biến đầu vào mẫu trong phần của trang Cú pháp mẫu

Angular nhân đôi myHero5 cho mỗi mục trong danh sách, đặt biến `0 thành mục (anh hùng) trong lần lặp hiện tại. Góc sử dụng biến đó làm ngữ cảnh cho phép nội suy trong dấu ngoặc nhọn kép

Trong trường hợp này, myHero2 đang hiển thị một mảng, nhưng myHero2 có thể lặp lại các mục cho bất kỳ đối tượng có thể lặp lại nào

Bây giờ các anh hùng xuất hiện trong một danh sách không có thứ tự

Tạo lớp cho dữ liệu

Mã của ứng dụng xác định dữ liệu trực tiếp bên trong thành phần, đây không phải là phương pháp hay nhất. Tuy nhiên, trong một bản demo đơn giản, nó ổn

Hiện tại, ràng buộc là một chuỗi các chuỗi. Trong các ứng dụng thực tế, hầu hết các liên kết đều dành cho các đối tượng chuyên biệt hơn

Để chuyển đổi ràng buộc này để sử dụng các đối tượng chuyên biệt, hãy biến mảng tên anh hùng thành một mảng gồm `6 đối tượng. Để làm được điều đó, bạn sẽ cần một lớp học `6

Tạo một tệp mới trong thư mục `8 được gọi bằng mã sau

src/ứng dụng/anh hùng. ts (trích đoạn)

xuất khẩu lớp Anh hùng { hàm tạo ( id công khai. số, tên công khai. chuỗi) { } }

Bạn đã định nghĩa một lớp với một hàm tạo và hai thuộc tính. `9 và `0

Nó có thể không giống như lớp có thuộc tính, nhưng nó có. Việc khai báo các tham số của hàm tạo tận dụng phím tắt TypeScript

Xem xét tham số đầu tiên

src/ứng dụng/anh hùng. ts (mã nhận dạng)

id công khai. số,

Cú pháp ngắn gọn đó làm được rất nhiều

• Khai báo một tham số hàm tạo và kiểu của nó
• Khai báo một tài sản công cộng cùng tên
• Khởi tạo thuộc tính đó với đối số tương ứng khi tạo một thể hiện của lớp

Sử dụng lớp anh hùng

Sau khi nhập lớp `6, thuộc tính `2 có thể trả về một mảng đã nhập gồm các đối tượng `6

src/ứng dụng/ứng dụng. thành phần. ts (anh hùng)

anh hùng = [ Anh hùng mới(1, 'Windstorm'), Anh hùng mới(13, 'Bombasto'), Anh hùng mới(15, 'Magneta'), Anh hùng mới(20, 'Tornado') ]; . anh hùng[0];

Tiếp theo, cập nhật mẫu. Tại thời điểm này, nó hiển thị `9 và `0 của anh hùng. Sửa lỗi đó để chỉ hiển thị thuộc tính `0 của anh hùng

src/ứng dụng/ứng dụng. thành phần. ts (mẫu)

template: `

{{title}}

My favorite hero is: {{myHero.name}}

Heroes:

• {{ hero.name }}

`

Màn hình trông giống nhau, nhưng mã rõ ràng hơn

Hiển thị có điều kiện với NgIf

Đôi khi, ứng dụng chỉ cần hiển thị chế độ xem hoặc một phần của chế độ xem trong các trường hợp cụ thể

Hãy thay đổi ví dụ để hiển thị thông báo nếu có nhiều hơn ba anh hùng

Chỉ thị `7 của Angular chèn hoặc loại bỏ một phần tử dựa trên điều kiện trung thực/sai. Để xem nó hoạt động, hãy thêm đoạn sau vào cuối mẫu

src/ứng dụng/ứng dụng. thành phần. ts (tin nhắn)

Có nhiều anh hùng.

Đừng quên dấu sao đầu tiên (*) trong `8. Nó là một phần thiết yếu của cú pháp. Đọc thêm về `7 và '0 trong trang Cú pháp mẫu

Biểu thức mẫu bên trong dấu ngoặc kép, '1, trông và hoạt động giống như TypeScript. Khi danh sách các anh hùng của thành phần có nhiều hơn ba mục, Angular sẽ thêm đoạn đó vào DOM và thông báo xuất hiện. Nếu có ba mục trở xuống, Angular sẽ bỏ qua đoạn đó, do đó không có thông báo nào xuất hiện. Để biết thêm thông tin, hãy xem phần của trang Cú pháp mẫu

Góc không hiển thị và ẩn tin nhắn. Nó đang thêm và xóa phần tử đoạn khỏi DOM. Điều đó cải thiện hiệu suất, đặc biệt là trong các dự án lớn hơn khi bao gồm hoặc loại trừ có điều kiện các khối HTML lớn có nhiều ràng buộc dữ liệu

dùng thử. Vì mảng có bốn mục nên thông báo sẽ xuất hiện. Quay trở lại và xóa hoặc nhận xét một trong các phần tử khỏi mảng anh hùng. Trình duyệt sẽ tự động làm mới và thông báo sẽ biến mất

Làm cách nào để tải tệp HTML trong Angular?

Làm cách nào để tải động HTML trong Angular?

Làm cách nào để tải trang HTML trong thành phần Góc?

Làm cách nào để đưa tệp HTML vào thẻ div?