NgĐối với InternalHTML

Question

Angular cung cấp một vài chỉ thị tích hợp. Nhưng không phải tất cả chúng đều được áp dụng theo cùng một cách. Ví dụ:

{{ variable }}{{ metadata.subtitle.value }}

62 được áp dụng như một thuộc tính HTML bình thường. Mặt khác, các chỉ thị cấu trúc như

{{ variable }}{{ metadata.subtitle.value }}

63 hoặc

{{ variable }}{{ metadata.subtitle.value }}

64 được sử dụng với dấu hoa thị ở đầu (

{{ variable }}{{ metadata.subtitle.value }}

65)

Tải xuống phiên bản có thể in. Phản ứng (PDF, 0. 9MB), Vue. js (PDF, 0. 7MB), Góc (PDF, 0. 7MB)

ReactVueAngular

{ variable }{ metadata.subtitle.value }

{{ variable }}{{ metadata.subtitle.value }}

{{ variable }}{{ metadata.subtitle.value }}

outputting data into HTML

< .. name={variable}>

< .. :name="variable">

< .. [attr.name]="variable">

outputting data into HTML attributes

< .. dangerouslySetInnerHTML={{__html: variable}}>

< .. v-html="variable">

< .. [innerHTML]="variable">

outputting HTML

const components = collectionVariable.map((item) => );
...
{components}const articleComponents = articles.map((article) => );
...
{articleComponents}

{{ variable }}{{ metadata.subtitle.value }}

0

{{ variable }}{{ metadata.subtitle.value }}

1iterating over data sets

{{ variable }}{{ metadata.subtitle.value }}

2

{{ variable }}{{ metadata.subtitle.value }}

3

{{ variable }}{{ metadata.subtitle.value }}

4iterating over data sets with index

{{ variable }}{{ metadata.subtitle.value }}

5

{{ variable }}{{ metadata.subtitle.value }}

6

{{ variable }}{{ metadata.subtitle.value }}

7rendering conditional markup

{{ variable }}{{ metadata.subtitle.value }}

8

{{ variable }}{{ metadata.subtitle.value }}

9

{{ variable }}{{ metadata.subtitle.value }}

0rendering conditional markup including else branch

{{ variable }}{{ metadata.subtitle.value }}

1

{{ variable }}{{ metadata.subtitle.value }}

2

{{ variable }}{{ metadata.subtitle.value }}

2adding standard class attribute

{{ variable }}{{ metadata.subtitle.value }}

4

{{ variable }}{{ metadata.subtitle.value }}

4

{{ variable }}{{ metadata.subtitle.value }}

4passing data to child components

Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?

Hành vi này bạn đang nhận được là bình thường. Lớp được thêm vào

{{ variable }}{{ metadata.subtitle.value }}

66 bị bỏ qua vì theo mặc định, đóng gói là

{{ variable }}{{ metadata.subtitle.value }}

67. Điều đó có nghĩa là Angular ngăn các kiểu chặn bên trong và bên ngoài thành phần. Bạn nên thay đổi đóng gói thành

{{ variable }}{{ metadata.subtitle.value }}

68 trong thành phần của mình. Bằng cách này, bạn sẽ có thể định nghĩa các lớp ở bất cứ đâu bạn muốn. bên trong

{{ variable }}{{ metadata.subtitle.value }}

69 hoặc trong một biểu định kiểu

{{ variable }}{{ metadata.subtitle.value }}

70,

{{ variable }}{{ metadata.subtitle.value }}

71 hoặc

{{ variable }}{{ metadata.subtitle.value }}

72 riêng biệt (không thành vấn đề) và Angular sẽ tự động thêm chúng vào DOM

{{ variable }}{{ metadata.subtitle.value }}

7

Angular là một khung nguồn mở dựa trên TypeScript được sử dụng để phát triển các ứng dụng web giao diện người dùng. Nó là sự kế thừa của AngularJS và tất cả các đề cập đến Angular đều đề cập đến các phiên bản 2 trở lên. Angular có các tính năng như chung chung, gõ tĩnh và một số tính năng ES6

Phiên bảnLịch sử

Google đã phát hành phiên bản đầu tiên của AngularJS vào ngày 20 tháng 10 năm 2010. Bản phát hành ổn định của AngularJS là vào ngày 18 tháng 12 năm 2017, phiên bản 1. 6. 8. Bản phát hành quan trọng cuối cùng của AngularJS, phiên bản 1. 7, diễn ra vào ngày 1 tháng 7 năm 2018 và hiện đang trong giai đoạn Hỗ trợ dài hạn 3 năm. góc 2. 0 lần đầu tiên được công bố vào ngày 22 tháng 9 năm 2014, tại hội nghị ng-Châu Âu. Một tính năng mới của Angular 2. 0 là tải động và hầu hết các chức năng cốt lõi đã được chuyển sang các mô-đun

Sau một số sửa đổi, Angular 4. 0 được phát hành vào tháng 12 năm 2016. Angular 4 tương thích ngược với Angular 2. 0 và một số tính năng mới là thư viện HttpClient và các sự kiện vòng đời bộ định tuyến mới. Angular 5 được phát hành vào ngày 1 tháng 11 năm 2017, một tính năng chính là hỗ trợ các ứng dụng web lũy tiến. Angular 6 được phát hành vào tháng 5 năm 2018 và Angular 7 vào tháng 10 năm 2018. Phiên bản ổn định mới nhất là 7. 0. 0

cài đặt

Cách dễ nhất để cài đặt Angular là thông qua Angular CLI. Công cụ này cho phép tạo các dự án mới và tạo các thành phần, dịch vụ, mô-đun, v.v. theo tiêu chuẩn mà nhóm Angular coi là phương pháp hay nhất

góc 2. x trở lên

Cài đặt CLI góc

{{ variable }}{{ metadata.subtitle.value }}

8

Tạo không gian làm việc và ứng dụng ban đầu

Bạn phát triển ứng dụng trong bối cảnh không gian làm việc Góc. Một không gian làm việc chứa các tệp cho một hoặc nhiều dự án. Dự án là tập hợp các tệp bao gồm một ứng dụng, thư viện hoặc các bài kiểm tra đầu cuối (e2e)

{{ variable }}{{ metadata.subtitle.value }}

9

Phục vụ ứng dụng

Angular bao gồm một máy chủ để bạn có thể dễ dàng xây dựng và phân phát ứng dụng của mình cục bộ

Điều hướng đến thư mục không gian làm việc (
```
< .. name={variable}>
```
05)

Khởi chạy máy chủ bằng cách sử dụng lệnh CLI

< .. name={variable}>

06 với tùy chọn

< .. name={variable}>

07

< .. name={variable}>

3

Hoan hô, bạn đã tạo ứng dụng góc cạnh đầu tiên của mình

các thành phần

Góc chứa nhiều sơ đồ để xây dựng ứng dụng. Các thành phần là một trong những sơ đồ như vậy. Chúng bao gồm một đơn vị logic liên quan đến một phần duy nhất của ứng dụng. Các thành phần thường hợp tác với các sơ đồ khác để hoạt động hiệu quả hơn

Các thành phần đơn giản hóa ứng dụng. Đưa logic vào một phần duy nhất của giao diện hiển thị là mục tiêu chính của họ. Để xây dựng ứng dụng từng bước, bạn phải xây dựng từng thành phần. Rốt cuộc, các thành phần hoạt động như các khối xây dựng của Angular

Lớp thành phần và siêu dữ liệu

Lệnh CLI

< .. name={variable}>

08 mang lại kết quả như sau

< .. name={variable}>

0

Đây là bộ xương cơ bản mà từ đó tất cả các thành phần tuyệt vời bắt nguồn. Trình trang trí

< .. name={variable}>

09 là phần quan trọng nhất. Không có nó, ví dụ trên trở thành một lớp chung. Góc dựa vào các bộ trang trí để phân biệt loại sơ đồ của một lớp

< .. name={variable}>

09 nhận siêu dữ liệu dưới dạng một đối tượng. Trình trang trí chỉ là các chức năng JavaScript dưới mui xe. Họ đưa ra các đối số như với đối tượng siêu dữ liệu. Đối tượng siêu dữ liệu định cấu hình các phụ thuộc cơ bản của thành phần. Mỗi lĩnh vực đóng một vai trò

```
< .. name={variable}>
```
81 yêu cầu Angular liên kết thành phần với một thành phần nhất định trong HTML mẫu của ứng dụng
```
< .. name={variable}>
```
82 chấp nhận vị trí tệp của HTML mẫu của thành phần (đây là nơi dữ liệu được hiển thị)
```
< .. name={variable}>
```
83 chấp nhận một mảng các vị trí tệp biểu định kiểu (chuỗi). Các biểu định kiểu này nhắm mục tiêu mẫu được chỉ định của thành phần

Hãy nghĩ về siêu dữ liệu như một khối cấu hình lớn. Trình trang trí lấy nó để nó có thể tạo dữ liệu cụ thể cho thành phần. Trình trang trí trang trí lớp bên dưới với dữ liệu cần thiết cho hành vi của lớp đó. Một lớp thành phần

Xuất chữ ký của lớp theo mặc định để thành phần có thể được nhập.

< .. name={variable}>

84 cũng được triển khai.

< .. name={variable}>

85 yêu cầu lớp xác định các phương thức nhất định theo định nghĩa của giao diện.

< .. name={variable}>

84 là móc vòng đời

dữ liệu thành phần

Dữ liệu thúc đẩy mọi thứ. Linh kiện cũng không ngoại lệ. Các thành phần gói gọn tất cả dữ liệu của chúng. Để nhận dữ liệu từ bên ngoài, một thành phần phải khai báo nó một cách rõ ràng. Hình thức bảo mật này giúp thông tin không bị xung đột trên cây thành phần

Dữ liệu xác định những gì được hiển thị từ lớp thành phần đến mẫu của nó. Mọi cập nhật đối với dữ liệu của lớp sẽ (hoặc ít nhất nên) cập nhật hiển thị mẫu

Các thành phần thường sẽ khởi tạo một tập hợp các thành viên (hoặc biến) lưu trữ dữ liệu. Chúng được sử dụng trong toàn bộ logic lớp thành phần để thuận tiện. Thông tin này cung cấp logic dẫn đến mẫu và hành vi của nó. Xem ví dụ sau

< .. name={variable}>

8

< .. :name="variable">

5

Lưu ý cách thành phần tương tác với dữ liệu của nó. Đầu tiên, nó tìm nạp nó từ

< .. name={variable}>

87 trước khi bắt đầu chuyển tiếp nó tới mẫu để hiển thị

Dữ liệu hiển thị xuyên suốt mẫu. Bên trong dấu ngoặc nhọn kép, giá trị của một biến được ánh xạ từ lớp thành phần vào dấu ngoặc nhọn. Các vòng lặp

< .. name={variable}>

88 trên mảng lớp

< .. name={variable}>

89. Nhấp vào nút sẽ xóa một phần tử cụ thể khỏi

< .. name={variable}>

89 theo chỉ mục của nó. Bạn thậm chí có thể thay đổi

< .. :name="variable">

51 trên cùng bằng cách nhập vào hộp nhập liệu

Các tương tác trên làm thay đổi dữ liệu của lớp thành phần, từ đó cập nhật HTML mẫu của thành phần. Các thành phần cung cấp logic xương sống tạo điều kiện thuận lợi cho luồng dữ liệu. HTML mẫu làm cho dữ liệu đó có thể đọc được cho người dùng

Ràng buộc dữ liệu

Dữ liệu thường xác định giao diện của một ứng dụng. Diễn giải dữ liệu đó vào giao diện người dùng liên quan đến logic lớp (

< .. :name="variable">

52) và chế độ xem mẫu (

< .. :name="variable">

53). Góc kết nối chúng thông qua liên kết dữ liệu. Hãy nghĩ về liên kết dữ liệu như một công cụ để tương tác thành phần

Thành phần và Mẫu

Thành phần lưu trữ hầu hết logic và dữ liệu của nó bên trong lớp được trang trí bằng

< .. name={variable}>

09. Trình trang trí này định nghĩa lớp là một thành phần với HTML mẫu. Mẫu của thành phần đại diện cho lớp trong ứng dụng. Trọng tâm ở đây cần nằm giữa lớp của thành phần và HTML mẫu

Đây là nơi liên kết dữ liệu xảy ra. Các thuộc tính và sự kiện của phần tử nhận các giá trị được gán. Các giá trị này, được định nghĩa bởi lớp thành phần, phục vụ một trong hai vai trò. Một là tạo dữ liệu mà mẫu sau đó nhận được. Cái còn lại xử lý các sự kiện được phát ra bởi phần tử mẫu

Thuộc tính vật phẩm

Để nhận ra các thuộc tính phần tử giới hạn dữ liệu, Angular sử dụng cú pháp dấu ngoặc đặc biệt

< .. [attr.name]="variable">

4

< .. [attr.name]="variable">

5

Chịu đựng tôi về điều này

< .. :name="variable">

55 phản chiếu thuộc tính trong nút đối tượng của phần tử Mô hình đối tượng miền (DOM). Đừng nhầm lẫn các thuộc tính của đối tượng với các thuộc tính của phần tử DOM. Các thuộc tính và thuộc tính thường có cùng tên và làm cùng một việc. Tuy nhiên có một sự phân biệt rõ ràng

Hãy nhớ rằng

< .. :name="variable">

56 (thuộc tính) là một thuộc tính duy nhất của đối tượng DOM bên dưới. Nó được khai báo khi khởi tạo DOM với các giá trị thuộc tính khớp với định nghĩa của phần tử. Nó duy trì cùng một giá trị sau đó. Mỗi thuộc tính có trường khóa-giá trị riêng trong nút đối tượng DOM. Các thuộc tính này có thể thay đổi sau khi khởi tạo

Biết sự khác biệt giữa thuộc tính và thuộc tính. Nó sẽ dẫn đến sự hiểu biết tốt hơn về cách Angular liên kết dữ liệu với các thuộc tính (ràng buộc thuộc tính). Angular sẽ hiếm khi liên kết dữ liệu với các thuộc tính của phần tử. Ngoại lệ cho điều này là rất hiếm. Một lần cuối. Góc liên kết dữ liệu thành phần với thuộc tính, không phải thuộc tính

Nhắc lại ví dụ,

< .. :name="variable">

57 trong phép gán thuộc tính của phần tử có ý nghĩa đặc biệt. Dấu ngoặc cho thấy rằng

< .. :name="variable">

58 bị ràng buộc với

< .. :name="variable">

59 ở bên phải của phép gán

< .. [attr.name]="variable">

40 cũng có ý nghĩa đặc biệt trong ngữ cảnh của dấu ngoặc. Bản thân

< .. [attr.name]="variable">

40 là một chuỗi ký tự. Góc đọc nó và khớp giá trị của nó với các thành viên lớp thành phần. Góc sẽ thay thế giá trị của thuộc tính thành viên phù hợp. Tất nhiên, điều này đề cập đến cùng một lớp thành phần lưu trữ mẫu HTML

Luồng dữ liệu một chiều từ thành phần này sang mẫu khác đã hoàn tất. Thành viên phù hợp với chuyển nhượng quyền của thuộc tính trong ngoặc cung cấp

< .. [attr.name]="variable">

40. Lưu ý rằng những thay đổi đối với giá trị của thành viên trong lớp thành phần thấm xuống mẫu. Đó là phát hiện thay đổi của Angular tại nơi làm việc. Các thay đổi trong phạm vi của mẫu không ảnh hưởng đến thành viên lớp thành phần

Chìa khóa lấy đi. lớp thành phần cung cấp dữ liệu trong khi mẫu hiển thị nó

Tôi đã không đề cập đến việc các giá trị dữ liệu cũng có thể hiển thị trong

< .. [attr.name]="variable">

43 của một thành phần. Ví dụ cuối cùng này thực hiện dấu ngoặc nhọn kép. Góc nhận ra các dấu ngoặc nhọn này và nội suy dữ liệu lớp thành phần phù hợp vào

< .. [attr.name]="variable">

43 của

< .. [attr.name]="variable">

45

< .. dangerouslySetInnerHTML={{__html: variable}}>

7

Xử lý sự kiện

Nếu thành phần cung cấp dữ liệu, thì mẫu cung cấp sự kiện

< .. dangerouslySetInnerHTML={{__html: variable}}>

8

{{ variable }}{{ metadata.subtitle.value }}

90

Điều này hoạt động tương tự như ràng buộc tài sản

< .. [attr.name]="variable">

46 liên quan đến bất kỳ loại sự kiện hợp lệ nào. Ví dụ: một trong những loại sự kiện phổ biến nhất là

< .. [attr.name]="variable">

47. Nó phát ra khi bạn nhấp chuột. Bất kể loại nào,

< .. [attr.name]="variable">

48 bị ràng buộc với

< .. [attr.name]="variable">

49 trong ví dụ. Trình xử lý sự kiện thường là các hàm thành viên của lớp thành phần

< .. [attr.name]="variable">

50 đặc biệt đối với Angular. Dấu ngoặc đơn nói với Angular một sự kiện được giới hạn với sự phân công đúng của

< .. [attr.name]="variable">

51. Bản thân sự kiện bắt nguồn từ phần tử máy chủ

Khi sự kiện phát ra, nó sẽ chuyển đối tượng Sự kiện ở dạng

< .. [attr.name]="variable">

52.

< .. [attr.name]="variable">

51 ánh xạ tới hàm

< .. [attr.name]="variable">

51 có tên giống hệt của lớp thành phần. Quá trình trao đổi một chiều từ phần tử giới hạn sự kiện sang lớp thành phần đã hoàn tất

Phát ra các sự kiện từ trình xử lý, trong khi có thể, không ảnh hưởng đến phần tử mẫu. Rốt cuộc thì ràng buộc là một chiều

chỉ thị

Chỉ thị là các thành phần và thuộc tính thành phần được tạo và nhận dạng bởi Angular. Góc liên kết phần tử hoặc thuộc tính với định nghĩa lớp tương ứng của nó.

< .. [attr.name]="variable">

55 hoặc

< .. name={variable}>

09 trang trí các lớp này. Cả hai đều là biểu thị cho Angular mà lớp thực hiện như một chỉ thị

Một số chỉ thị sửa đổi phong cách của phần tử máy chủ. Các lệnh khác hiển thị chế độ xem hoặc chèn vào chế độ xem hiện có dưới dạng chế độ xem được nhúng. Nói cách khác, chúng thay đổi bố cục HTML

Trong mọi trường hợp, các lệnh báo hiệu trình biên dịch Angular. Họ đánh dấu các thành phần để sửa đổi tùy thuộc vào logic lớp của chỉ thị

chỉ thị kết cấu

Dưới đây là ba ví dụ về chỉ thị cấu trúc. Mỗi người có một đối tác hợp lý (______557,

< .. [attr.name]="variable">

58, và

< .. [attr.name]="variable">

59)

*ngNếu
*ngDành cho
*ngSwitchCase và *ngSwitchDefault

Lưu ý quan trọng. cả ba đều có sẵn thông qua nhập khẩu

< .. dangerouslySetInnerHTML={{__html: variable}}>

70. Nó có sẵn từ

< .. dangerouslySetInnerHTML={{__html: variable}}>

71 để nhập trong mô-đun gốc của ứng dụng

*ngNếu

< .. dangerouslySetInnerHTML={{__html: variable}}>

72 kiểm tra một giá trị đã cho để xem giá trị đó là đúng hay sai dựa trên đánh giá boolean chung trong JavaScript. Nếu đúng, phần tử và HTML bên trong của nó sẽ hiển thị. Mặt khác, chúng không bao giờ kết xuất với Mô hình đối tượng miền (DOM)

{{ variable }}{{ metadata.subtitle.value }}

91

Đây là một ví dụ giả tạo. Bất kỳ giá trị thành viên nào từ lớp thành phần của mẫu có thể được thay thế cho

< .. dangerouslySetInnerHTML={{__html: variable}}>

73 hoặc

< .. dangerouslySetInnerHTML={{__html: variable}}>

74

CẤP. Bạn cũng có thể làm điều sau với *ngIf để có quyền truy cập vào giá trị có thể quan sát được

{{ variable }}{{ metadata.subtitle.value }}

92

*ngDành cho

< .. name={variable}>

88 vòng lặp dựa trên biểu thức vi cú pháp được chỉ định bên phải. Microsyntax vượt ra ngoài phạm vi của bài viết này. Biết rằng cú pháp vi mô là một dạng biểu thức logic ngắn. Nó xuất hiện dưới dạng một chuỗi duy nhất có khả năng tham chiếu các giá trị thành viên của lớp. Nó có thể lặp lại các giá trị có thể lặp lại, điều này làm cho nó hữu ích cho

< .. name={variable}>

88

{{ variable }}{{ metadata.subtitle.value }}

93

< .. dangerouslySetInnerHTML={{__html: variable}}>

77 là một giá trị có thể lặp lại. Mảng là một trong những iterable phổ biến nhất.

< .. name={variable}>

88 tạo ra một

< .. dangerouslySetInnerHTML={{__html: variable}}>

79 mới cho mỗi phần tử mảng. Mỗi phần tử mảng được gán biến

< .. dangerouslySetInnerHTML={{__html: variable}}>

80. Tất cả điều này được thực hiện bằng cách sử dụng microsyntax.

< .. name={variable}>

88 xác định nội dung cấu trúc của phần tử

< .. dangerouslySetInnerHTML={{__html: variable}}>

82. Đó là đặc điểm của một chỉ thị cấu trúc

CẤP. Bạn cũng có thể làm điều sau với chỉ thị *ngFor để có quyền truy cập vào giá trị có thể quan sát được (hacky)

{{ variable }}{{ metadata.subtitle.value }}

94

ngSwitchCase và ngSwitchDefault

Hai chỉ thị cấu trúc này phối hợp với nhau để cung cấp chức năng

< .. [attr.name]="variable">

59 cho HTML mẫu

{{ variable }}{{ metadata.subtitle.value }}

95

Chỉ một trong các biểu thức

< .. dangerouslySetInnerHTML={{__html: variable}}>

84 hiển thị. Lưu ý thuộc tính

< .. dangerouslySetInnerHTML={{__html: variable}}>

85 bên trong phần tử

< .. [attr.name]="variable">

45 bao bọc công tắc. Điều này vượt qua giá trị của

< .. dangerouslySetInnerHTML={{__html: variable}}>

80 dọc theo chuỗi

< .. dangerouslySetInnerHTML={{__html: variable}}>

88. Chuỗi chỉ thị cấu trúc này xác định phần tử

< .. dangerouslySetInnerHTML={{__html: variable}}>

89 nào hiển thị

Như vậy,

< .. dangerouslySetInnerHTML={{__html: variable}}>

85 không phải là một chỉ thị cấu trúc không giống như các câu lệnh

< .. dangerouslySetInnerHTML={{__html: variable}}>

84. Nó chuyển giá trị trong khi khối chuyển đổi xác định bố cục cuối cùng của HTML

Hãy nhớ rằng cách điệu và truyền giá trị không phải là trách nhiệm của các chỉ thị cấu trúc. Điều đó liên quan đến chỉ thị thuộc tính. Các chỉ thị cấu trúc chỉ xác định bố cục

đường ống

Chuyển đổi dữ liệu đầu ra đảm bảo dữ liệu ở định dạng mong muốn khi tải lên màn hình của người dùng. Thông thường dữ liệu biến đổi đằng sau hậu trường. Với đường ống, việc chuyển đổi dữ liệu có thể diễn ra trong HTML mẫu. Đường ống trực tiếp chuyển đổi dữ liệu mẫu

Ống nhìn đẹp và tiện lợi. Chúng giúp giữ cho lớp của thành phần dựa trên các phép biến đổi cơ bản. Nói một cách kỹ thuật, các đường ống đóng gói logic chuyển đổi dữ liệu

trường hợp sử dụng

Angular được đóng gói sẵn với một bộ đường ống cơ bản. Làm việc với một vài người trong số họ sẽ phát triển trực giác để xử lý phần còn lại. Danh sách sau đây cung cấp ba ví dụ

không đồng bộ
NgàyỐng
Tiêu ĐềTrường HợpỐng

không đồng bộ

Phần này yêu cầu hiểu biết cơ bản về lời hứa hoặc quan sát để đánh giá đầy đủ. AsyncPipe hoạt động trên một trong hai. AsyncPipe trích xuất dữ liệu từ Promises/Observables làm đầu ra cho bất cứ điều gì xảy ra tiếp theo

Trong trường hợp của Đài quan sát, Async Pipe tự động đăng ký nguồn dữ liệu. Bất kể dữ liệu đến từ đâu, AsyncPipe đăng ký nguồn có thể quan sát được.

{{ variable }}{{ metadata.subtitle.value }}

902 là tên cú pháp của AsyncPipe như hình bên dưới

{{ variable }}{{ metadata.subtitle.value }}

96

Trong ví dụ,

{{ variable }}{{ metadata.subtitle.value }}

903 là một Observable đang chờ tải khoai tây lên. Khi khoai tây đến, đồng bộ hoặc không đồng bộ, AsyncPipe sẽ nhận chúng dưới dạng một mảng có thể lặp lại. Phần tử danh sách sau đó lấp đầy bằng khoai tây

NgàyỐng

Định dạng chuỗi ngày mất một chút hack với đối tượng JavaScript

{{ variable }}{{ metadata.subtitle.value }}

904. DatePipe cung cấp một cách mạnh mẽ để định dạng ngày với giả định đầu vào đã cho là định dạng thời gian hợp lệ

Tiêu ĐềTrường HợpỐng

Chuyển đổi văn bản thành trường hợp tiêu đề. Viết hoa chữ cái đầu tiên của mỗi từ và chuyển phần còn lại của từ thành chữ thường. Các từ được phân tách bằng bất kỳ ký tự khoảng trắng nào, chẳng hạn như dấu cách, tab hoặc ký tự xuống dòng

{{ variable }}{{ metadata.subtitle.value }}

97____298

Định dạng của

{{ variable }}{{ metadata.subtitle.value }}

905 ở trên là ISO 86011—không phải là định dạng dễ đọc nhất. DatePipe (

{{ variable }}{{ metadata.subtitle.value }}

906) chuyển đổi định dạng ngày ISO thành một

{{ variable }}{{ metadata.subtitle.value }}

907 thông thường hơn. Có nhiều tùy chọn định dạng khác. Tất cả các tùy chọn này đều có trong tài liệu chính thức

Tạo đường ống

Trong khi Angular chỉ có một số đường ống nhất định, trình trang trí

{{ variable }}{{ metadata.subtitle.value }}

908 cho phép các nhà phát triển tạo ra các đường ống của riêng họ. Quá trình bắt đầu với

{{ variable }}{{ metadata.subtitle.value }}

909, thay thế

{{ variable }}{{ metadata.subtitle.value }}

910 bằng tên tệp thích hợp hơn. Lệnh này mang lại như sau

{{ variable }}{{ metadata.subtitle.value }}

99

Mẫu đường ống này đơn giản hóa việc tạo đường ống tùy chỉnh. Trình trang trí

{{ variable }}{{ metadata.subtitle.value }}

908 nói với Angular rằng lớp là một đường ống. Giá trị của

{{ variable }}{{ metadata.subtitle.value }}

912, trong trường hợp này là

{{ variable }}{{ metadata.subtitle.value }}

913, là giá trị mà Angular nhận ra khi quét HTML mẫu cho các đường dẫn tùy chỉnh

Về logic lớp. Việc triển khai

{{ variable }}{{ metadata.subtitle.value }}

914 cung cấp hướng dẫn cho hàm

{{ variable }}{{ metadata.subtitle.value }}

915. Hàm này có ý nghĩa đặc biệt trong ngữ cảnh của trình trang trí

{{ variable }}{{ metadata.subtitle.value }}

908. Nó nhận được hai tham số theo mặc định

{{ variable }}{{ metadata.subtitle.value }}

917 là đầu ra mà đường ống nhận được. Nghĩ về

{{ variable }}{{ metadata.subtitle.value }}

918. Giá trị của someValue được chuyển đến tham số

{{ variable }}{{ metadata.subtitle.value }}

917 của hàm

{{ variable }}{{ metadata.subtitle.value }}

915. Đây là hàm

{{ variable }}{{ metadata.subtitle.value }}

915 tương tự được định nghĩa trong lớp ExamplePipe

{{ variable }}{{ metadata.subtitle.value }}

922 là bất kỳ đối số nào mà đường ống tùy ý nhận. Hãy nghĩ về

{{ variable }}{{ metadata.subtitle.value }}

923.

{{ variable }}{{ metadata.subtitle.value }}

924 có thể được thay thế bằng bất kỳ một giá trị nào. Giá trị này được chuyển đến tham số

{{ variable }}{{ metadata.subtitle.value }}

922 của hàm

{{ variable }}{{ metadata.subtitle.value }}

915. Tức là hàm

{{ variable }}{{ metadata.subtitle.value }}

915 được định nghĩa trong lớp của ExamplePipe

Bất kể hàm nào trả về (

{{ variable }}{{ metadata.subtitle.value }}

928) đều trở thành đầu ra của thao tác đường ống. Hãy xem ví dụ tiếp theo để xem một ví dụ hoàn chỉnh về ExamplePipe. Tùy thuộc vào biến mà đường ống nhận được, đầu vào là chữ hoa hoặc chữ thường dưới dạng đầu ra mới. Đối số không hợp lệ hoặc không tồn tại sẽ khiến đường ống trả về cùng một đầu vào với đầu ra

< .. name={variable}>

30

< .. name={variable}>

31

< .. name={variable}>

32

móc vòng đời

Lifecycle hooks là các phương thức tính thời gian. Chúng khác nhau về thời điểm và lý do chúng thực thi. Phát hiện thay đổi kích hoạt các phương pháp này. Chúng thực hiện tùy thuộc vào các điều kiện của chu kỳ hiện tại. Angular chạy phát hiện thay đổi liên tục trên dữ liệu của nó. Móc vòng đời giúp quản lý hiệu ứng của nó

Một khía cạnh quan trọng của các hook này là thứ tự thực hiện của chúng. Nó không bao giờ đi chệch hướng. Chúng thực thi dựa trên một loạt các sự kiện tải có thể dự đoán được tạo ra từ một chu kỳ phát hiện. Điều này làm cho chúng có thể dự đoán được. Một số nội dung chỉ khả dụng sau khi một hook nhất định thực thi. Tất nhiên, hook chỉ thực thi trong một số điều kiện nhất định được đặt trong chu kỳ phát hiện thay đổi hiện tại

Theo thứ tự thực hiện

ngOnChanges

{{ variable }}{{ metadata.subtitle.value }}

929 kích hoạt sau khi sửa đổi thành viên lớp bị ràng buộc

{{ variable }}{{ metadata.subtitle.value }}

930. Dữ liệu bị ràng buộc bởi trình trang trí

{{ variable }}{{ metadata.subtitle.value }}

931 đến từ một nguồn bên ngoài. Khi nguồn bên ngoài già đi dữ liệu đó theo cách có thể phát hiện được, nó sẽ chuyển qua thuộc tính

{{ variable }}{{ metadata.subtitle.value }}

930 một lần nữa

Với bản cập nhật này,

{{ variable }}{{ metadata.subtitle.value }}

929 ngay lập tức kích hoạt. Nó cũng kích hoạt khi khởi tạo dữ liệu đầu vào. Móc nhận một tham số tùy chọn thuộc loại

{{ variable }}{{ metadata.subtitle.value }}

934. Giá trị này chứa thông tin về các thuộc tính giới hạn đầu vào đã thay đổi

ngOnInit

< .. name={variable}>

84 kích hoạt một lần khi khởi tạo thuộc tính giới hạn đầu vào (

{{ variable }}{{ metadata.subtitle.value }}

930) của một thành phần. Ví dụ tiếp theo sẽ giống như ví dụ trước. Móc không kích hoạt khi ChildComponent nhận dữ liệu đầu vào. Thay vào đó, nó kích hoạt ngay sau khi dữ liệu hiển thị thành mẫu ChildComponent

ngDoCheck

{{ variable }}{{ metadata.subtitle.value }}

937 kích hoạt với mọi chu kỳ phát hiện thay đổi. Phát hiện thay đổi chạy góc thường xuyên. Thực hiện bất kỳ hành động nào sẽ khiến nó quay vòng.

{{ variable }}{{ metadata.subtitle.value }}

937 cháy với các chu kỳ này. Sử dụng nó một cách thận trọng. Nó có thể tạo ra các vấn đề về hiệu suất khi triển khai không chính xác

{{ variable }}{{ metadata.subtitle.value }}

937 cho phép nhà phát triển kiểm tra dữ liệu của họ theo cách thủ công. Họ có thể kích hoạt một ngày nộp đơn mới một cách có điều kiện. Cùng với

{{ variable }}{{ metadata.subtitle.value }}

940, nhà phát triển có thể tạo kiểm tra của riêng họ để phát hiện thay đổi

ngafterContentInit

{{ variable }}{{ metadata.subtitle.value }}

941 kích hoạt sau khi khởi tạo DOM nội dung của thành phần (tải lần đầu tiên). Đang chờ truy vấn

{{ variable }}{{ metadata.subtitle.value }}

942 là trường hợp sử dụng chính của hook

{{ variable }}{{ metadata.subtitle.value }}

942 truy vấn mang lại tham chiếu phần tử cho nội dung DOM. Như vậy, chúng không khả dụng cho đến sau khi tải DOM nội dung. Do đó tại sao

{{ variable }}{{ metadata.subtitle.value }}

941 và đối tác của nó là

{{ variable }}{{ metadata.subtitle.value }}

945 được sử dụng

ngafterContentChecked

{{ variable }}{{ metadata.subtitle.value }}

945 kích hoạt sau mỗi chu kỳ phát hiện thay đổi nhắm mục tiêu DOM nội dung. Điều này cho phép các nhà phát triển tạo điều kiện thuận lợi cho cách DOM nội dung phản ứng với phát hiện thay đổi.

{{ variable }}{{ metadata.subtitle.value }}

945có thể cháy thường xuyên và gây ra các vấn đề về hiệu suất nếu triển khai kém

{{ variable }}{{ metadata.subtitle.value }}

945 cũng kích hoạt trong giai đoạn khởi tạo của một thành phần. Nó đến ngay sau

{{ variable }}{{ metadata.subtitle.value }}

941

ngAfterViewInit

{{ variable }}{{ metadata.subtitle.value }}

950 kích hoạt một lần sau khi chế độ xem DOM khởi tạo xong. Chế độ xem luôn tải ngay sau nội dung.

{{ variable }}{{ metadata.subtitle.value }}

950 chờ truy vấn của

{{ variable }}{{ metadata.subtitle.value }}

952 giải quyết. Các phần tử này được truy vấn từ trong cùng một chế độ xem của thành phần

Trong ví dụ bên dưới, tiêu đề

{{ variable }}{{ metadata.subtitle.value }}

953 của BComponent được truy vấn.

{{ variable }}{{ metadata.subtitle.value }}

950 thực thi ngay khi có kết quả của truy vấn

ngAfterViewChecked

{{ variable }}{{ metadata.subtitle.value }}

955 kích hoạt sau bất kỳ chu kỳ phát hiện thay đổi nào nhắm vào chế độ xem của thành phần. Móc

{{ variable }}{{ metadata.subtitle.value }}

955 cho phép các nhà phát triển hỗ trợ cách phát hiện thay đổi ảnh hưởng đến chế độ xem DOM

ngOnDestroy

{{ variable }}{{ metadata.subtitle.value }}

957 kích hoạt khi xóa thành phần khỏi chế độ xem và DOM tiếp theo. Móc này cung cấp cơ hội để làm sạch bất kỳ kết thúc lỏng lẻo nào trước khi xóa một thành phần

lượt xem

Lượt xem gần giống như DOM ảo của riêng họ. Mỗi chế độ xem chứa một tham chiếu đến một phần tương ứng của DOM. Bên trong một khung nhìn là các nút phản chiếu những gì có trong phần này. Góc chỉ định một nút xem cho mỗi phần tử DOM. Mỗi nút giữ một tham chiếu đến một phần tử phù hợp

Khi Angular kiểm tra các thay đổi, nó sẽ kiểm tra các khung nhìn. Góc tránh DOM dưới mui xe. Các khung nhìn tham chiếu DOM thay mặt cho nó. Các cơ chế khác được áp dụng để đảm bảo rằng các thay đổi về chế độ xem hiển thị cho DOM. Ngược lại, những thay đổi đối với DOM không ảnh hưởng đến chế độ xem

Một lần nữa, các chế độ xem phổ biến trên tất cả các nền tảng phát triển ngoài DOM. Ngay cả khi phát triển cho một nền tảng, lượt xem vẫn được coi là phương pháp hay nhất. Họ đảm bảo rằng Angular có cách giải thích chính xác về DOM

Chế độ xem có thể không tồn tại trên thư viện của bên thứ ba. Thao tác DOM trực tiếp là lối thoát hiểm cho loại kịch bản này. Cấp, đừng mong đợi ứng dụng hoạt động đa nền tảng

Các loại chế độ xem

Có hai loại quan điểm chính. nhúng và lưu trữ

Cũng tồn tại các vùng chứa xem. Chúng giữ các chế độ xem được nhúng và lưu trữ và thường được gọi là "các chế độ xem" đơn giản

Mỗi lớp

< .. name={variable}>

09 đăng ký một khung nhìn (view) với Angular. Các thành phần mới tạo bộ chọn tùy chỉnh nhắm mục tiêu một phần tử DOM nhất định. Chế độ xem gắn với phần tử đó bất cứ nơi nào nó xuất hiện. Angular hiện biết thành phần tồn tại khi nhìn vào mô hình xem

Chế độ xem máy chủ và vùng chứa

Máy chủ xem các thành phần động của máy chủ. Vùng chứa khung nhìn (lượt xem) tự động đính kèm vào các thành phần đã có trong mẫu. Chế độ xem có thể đính kèm vào bất kỳ phần tử nào ngoài phần tử duy nhất cho các lớp thành phần

Hãy nghĩ về phương pháp tạo thành phần truyền thống. Nó bắt đầu bằng cách tạo một lớp, trang trí nó bằng

< .. name={variable}>

09 và điền vào siêu dữ liệu. Cách tiếp cận này xảy ra đối với mọi thành phần được xác định trước của mẫu

Hãy thử sử dụng lệnh Giao diện dòng lệnh góc (CLI).

< .. name={variable}>

08. Nó mang lại những điều sau đây

< .. name={variable}>

0

Điều này tạo thành phần với bộ chọn

{{ variable }}{{ metadata.subtitle.value }}

961. Điều này đính kèm một vùng chứa chế độ xem vào

{{ variable }}{{ metadata.subtitle.value }}

962 trong mẫu. Nếu đây là gốc của ứng dụng, chế độ xem của nó sẽ gói gọn tất cả các chế độ xem khác. Chế độ xem gốc đánh dấu sự bắt đầu của ứng dụng từ góc nhìn của Angular

Tạo các thành phần một cách linh hoạt và đăng ký chúng trong mô hình Chế độ xem góc cần thêm một số bước. Chỉ thị cấu trúc giúp quản lý nội dung động (

{{ variable }}{{ metadata.subtitle.value }}

963). Tuy nhiên, các chỉ thị không mở rộng sang các ứng dụng lớn hơn. Quá nhiều chỉ thị cấu trúc làm phức tạp mẫu

Đây là lúc việc khởi tạo các thành phần từ logic lớp hiện có trở nên hữu ích. Các thành phần này cần tạo chế độ xem máy chủ có thể chèn vào mô hình chế độ xem. Chế độ xem máy chủ lưu trữ dữ liệu cho các thành phần để Angular nhận ra mục đích cấu trúc của chúng

Chế độ xem được nhúng

Chỉ thị cấu trúc tạo ra một. Phần tử máy chủ của lệnh có một vùng chứa chế độ xem được đính kèm. Điều này giúp nội dung có thể hiển thị theo cách có điều kiện vào bố cục dự định của nó

{{ variable }}{{ metadata.subtitle.value }}

964 giữ các nút xem được nhúng đại diện cho từng phần tử bên trongHTML bên trong của nó.

{{ variable }}{{ metadata.subtitle.value }}

964 hoàn toàn không phải là một phần tử DOM. Nó tự nhận xét. Các thẻ xác định phạm vi của chế độ xem được nhúng của nó

Khởi tạo chế độ xem được nhúng không yêu cầu tài nguyên bên ngoài ngoài tài liệu tham khảo của chính nó. Truy vấn

{{ variable }}{{ metadata.subtitle.value }}

967 có thể tìm nạp

Với tham chiếu mẫu, việc gọi

{{ variable }}{{ metadata.subtitle.value }}

968 từ nó sẽ thực hiện thủ thuật. InternalHTML của tham chiếu trở thành thể hiện dạng xem được nhúng của chính nó

Trong ví dụ tiếp theo,

{{ variable }}{{ metadata.subtitle.value }}

969 là vùng chứa chế độ xem.

{{ variable }}{{ metadata.subtitle.value }}

970 được nhận xét trong quá trình biên dịch giống như

{{ variable }}{{ metadata.subtitle.value }}

964. Do đó, nó cung cấp một lối thoát để chèn chế độ xem được nhúng trong khi vẫn giữ cho DOM gọn gàng

Mẫu dạng xem được nhúng chèn vào vị trí bố trí của

{{ variable }}{{ metadata.subtitle.value }}

970. Chế độ xem mới được chèn này không có đóng gói chế độ xem bổ sung nào ngoài vùng chứa chế độ xem. Hãy nhớ điều đó khác với chế độ xem máy chủ như thế nào (chế độ xem máy chủ đính kèm với trình bao bọc phần tử

{{ variable }}{{ metadata.subtitle.value }}

973 của chúng)

< .. name={variable}>

34

{{ variable }}{{ metadata.subtitle.value }}

967 truy vấn cho biến tham chiếu mẫu

{{ variable }}{{ metadata.subtitle.value }}

975. Điều này cung cấp một tài liệu tham khảo mẫu của loại

{{ variable }}{{ metadata.subtitle.value }}

976.

{{ variable }}{{ metadata.subtitle.value }}

976 giữ chức năng

{{ variable }}{{ metadata.subtitle.value }}

968. Nó khởi tạo mẫu dưới dạng chế độ xem được nhúng

Đối số duy nhất của

{{ variable }}{{ metadata.subtitle.value }}

968 là dành cho ngữ cảnh. Nếu bạn muốn chuyển siêu dữ liệu bổ sung, bạn có thể làm điều đó ở đây dưới dạng một đối tượng. Các trường phải khớp với thuộc tính

{{ variable }}{{ metadata.subtitle.value }}

964 (

{{ variable }}{{ metadata.subtitle.value }}

981). Vượt qua

{{ variable }}{{ metadata.subtitle.value }}

982 cho biết không cần thêm siêu dữ liệu

Truy vấn

{{ variable }}{{ metadata.subtitle.value }}

967 thứ hai cung cấp tham chiếu đến

{{ variable }}{{ metadata.subtitle.value }}

970 dưới dạng

{{ variable }}{{ metadata.subtitle.value }}

985. Chế độ xem được nhúng chỉ đính kèm với các chế độ xem khác, không bao giờ là DOM.

{{ variable }}{{ metadata.subtitle.value }}

985 tham chiếu đến chế độ xem trong chế độ xem được nhúng

Chế độ xem được nhúng cũng có thể chèn vào chế độ xem thành phần của

{{ variable }}{{ metadata.subtitle.value }}

962. Cách tiếp cận này định vị chế độ xem ở cuối chế độ xem của ExampleComponent. Tuy nhiên, trong ví dụ này, chúng tôi muốn nội dung hiển thị ở chính giữa nơi có

{{ variable }}{{ metadata.subtitle.value }}

970 chỗ ngồi

Hàm

{{ variable }}{{ metadata.subtitle.value }}

985

{{ variable }}{{ metadata.subtitle.value }}

990 chèn chế độ xem được nhúng vào

{{ variable }}{{ metadata.subtitle.value }}

970. Nội dung của chế độ xem hiển thị ở vị trí dự định ngay giữa chế độ xem của ExampleComponent

định tuyến

Định tuyến là cần thiết. Nhiều ứng dụng web hiện đại lưu trữ quá nhiều thông tin cho một trang. Người dùng cũng không cần phải cuộn qua toàn bộ giá trị nội dung của ứng dụng. Một ứng dụng cần tự chia thành các phần có thể phân biệt được. Một cách thực hành tốt nhất của Angular là tải và định cấu hình bộ định tuyến trong một mô-đun cấp cao nhất, riêng biệt dành riêng cho việc định tuyến và được nhập bởi AppModule gốc

Người dùng ưu tiên thông tin cần thiết. Định tuyến giúp họ tìm phần ứng dụng có thông tin đó. Bất kỳ thông tin nào khác hữu ích cho những người dùng khác có thể tồn tại trên một lộ trình hoàn toàn riêng biệt. Với định tuyến, cả hai người dùng có thể tìm thấy những gì họ cần một cách nhanh chóng. Các chi tiết không liên quan bị che khuất đằng sau các tuyến đường không liên quan

Định tuyến vượt trội trong việc sắp xếp và hạn chế quyền truy cập vào dữ liệu ứng dụng. Dữ liệu nhạy cảm không bao giờ được hiển thị cho người dùng trái phép. Giữa mỗi tuyến đường, ứng dụng có thể can thiệp. Nó có thể kiểm tra phiên của người dùng cho mục đích xác thực. Quá trình kiểm tra này xác định tuyến đường sẽ hiển thị gì nếu nó hoàn toàn hiển thị. Định tuyến mang đến cho nhà phát triển cơ hội hoàn hảo để xác minh người dùng trước khi tiếp tục

Đối với Angular, định tuyến chiếm toàn bộ thư viện của riêng nó trong khung. Tất cả các khung giao diện người dùng hiện đại đều hỗ trợ định tuyến và Angular cũng không khác. Định tuyến xảy ra từ phía máy khách bằng cách sử dụng hàm băm hoặc định tuyến vị trí. Cả hai kiểu đều cho phép khách hàng quản lý các tuyến đường của riêng mình. Không cần hỗ trợ thêm từ máy chủ ngoài yêu cầu ban đầu

Định tuyến cơ bản

Xuất các tiện ích định tuyến với

{{ variable }}{{ metadata.subtitle.value }}

992 có sẵn từ

{{ variable }}{{ metadata.subtitle.value }}

993. Nó không phải là một phần của thư viện lõi vì không phải tất cả các ứng dụng đều yêu cầu định tuyến. Cách thông thường nhất để giới thiệu định tuyến là mô-đun tính năng riêng của nó

Khi độ phức tạp của tuyến đường tăng lên, việc có nó làm mô-đun riêng sẽ thúc đẩy tính đơn giản của mô-đun gốc. Giữ cho nó đơn giản mà không ảnh hưởng đến chức năng tạo thành thiết kế tốt cho các mô-đun

< .. name={variable}>

35

{{ variable }}{{ metadata.subtitle.value }}

994 là một hàm lớp có sẵn từ lớp RouterModule. Hàm chấp nhận một mảng các đối tượng

{{ variable }}{{ metadata.subtitle.value }}

995 là

{{ variable }}{{ metadata.subtitle.value }}

996.

{{ variable }}{{ metadata.subtitle.value }}

994 định cấu hình các tuyến để tải háo hức trong khi cấu hình thay thế của nó là

{{ variable }}{{ metadata.subtitle.value }}

998 để tải chậm

Eager-loading nghĩa là các tuyến tải nội dung của chúng vào ứng dụng ngay từ đầu. Lazy loading diễn ra theo yêu cầu. Trọng tâm của bài viết này là háo hức tải. Đó là cách tiếp cận mặc định để tải vào một ứng dụng. Định nghĩa lớp RouterModule trông giống như khối mã tiếp theo

< .. name={variable}>

36

Đừng lo lắng về các chi tiết cấu hình mà ví dụ bỏ qua với các bình luận. Có một sự hiểu biết chung sẽ làm cho bây giờ

Lưu ý cách AppRoutingModule nhập RouterModule đồng thời xuất nó. Điều này hợp lý vì AppRoutingModule là một mô-đun tính năng. Nó nhập vào mô-đun gốc dưới dạng mô-đun tính năng. Nó hiển thị các chỉ thị, giao diện và dịch vụ của RouterModule cho cây thành phần gốc

Điều này giải thích tại sao AppRoutingModule phải xuất RouterModule. Nó làm như vậy vì lợi ích của cây thành phần cơ bản của mô-đun gốc. Nó cần quyền truy cập vào các tiện ích định tuyến đó

< .. name={variable}>

37

Mã thông báo AppRoutingModule nhập từ trên cùng. Mã thông báo của nó chèn vào mảng nhập khẩu của mô-đun gốc. Cây thành phần gốc bây giờ có thể sử dụng thư viện RouterModule. Điều đó bao gồm các chỉ thị, giao diện và dịch vụ của nó như đã đề cập. Xin chân thành cảm ơn AppRoutingModule đã xuất RouterModule

Các tiện ích RouterModule sẽ có ích cho các thành phần gốc. HTML cơ bản cho AppComponent sử dụng một lệnh.

{{ variable }}{{ metadata.subtitle.value }}

999

< .. name={variable}>

38

< .. name={variable}>

300 là một chỉ thị thuộc tính của RouterModule. Nó sẽ gắn vào từng phần tử của

< .. name={variable}>

301 sau khi các tuyến được thiết lập.

{{ variable }}{{ metadata.subtitle.value }}

999 là một chỉ thị thành phần với hành vi thú vị. Nó hoạt động nhiều hơn như một điểm đánh dấu để hiển thị nội dung được định tuyến. Kết quả nội dung được định tuyến từ điều hướng đến một tuyến đường cụ thể. Thông thường, điều đó có nghĩa là một thành phần duy nhất được định cấu hình trong AppRoutingModule

Nội dung được định tuyến hiển thị ngay sau

< .. name={variable}>

303. Không có gì ám bên trong của nó. Điều này không tạo ra quá nhiều sự khác biệt đáng kể. Điều đó nói rằng, đừng mong đợi

{{ variable }}{{ metadata.subtitle.value }}

999 hoạt động giống như một vùng chứa nội dung được định tuyến. Nó chỉ đơn thuần là một điểm đánh dấu để nối thêm nội dung được định tuyến vào Mô hình đối tượng tài liệu (DOM)

Câu hỏi đầu tiên cần giải quyết là ứng dụng này sẽ sử dụng những tuyến đường nào? . AComponent và BComponent. Mỗi người nên có con đường riêng. Họ có thể kết xuất từ AppComponent ________ 2999 tùy thuộc vào vị trí tuyến đường hiện tại

Vị trí tuyến đường (hoặc đường dẫn) xác định những gì nối với nguồn gốc của trang web (e. g. http. //máy chủ cục bộ. 4200) qua một loạt dấu gạch chéo (______3306)

< .. name={variable}>

39

< .. name={variable}>

307 hiển thị AComponent từ

{{ variable }}{{ metadata.subtitle.value }}

999 của AppComponent. ________ 3309 renderThành phần. Tuy nhiên, bạn cần một cách để định tuyến đến những vị trí này mà không cần sử dụng thanh địa chỉ. Ứng dụng không nên dựa vào thanh địa chỉ của trình duyệt web để điều hướng

CSS toàn cầu (Cascading Style-sheets) bổ sung cho HTML bên dưới nó. Liên kết bộ định tuyến của ứng dụng phải có giao diện dễ chịu. CSS này cũng áp dụng cho tất cả các ví dụ khác

< .. name={variable}>

00

< .. name={variable}>

01

Đây là định tuyến cơ bản. Nhấp vào một trong các phần tử của bộ định tuyếnLink sẽ định tuyến địa chỉ web. Nó chỉ định lại nó mà không cần làm mới trình duyệt web. Angular's

< .. name={variable}>

310 ánh xạ địa chỉ được định tuyến tới

{{ variable }}{{ metadata.subtitle.value }}

996 được định cấu hình trong AppRoutingModule. Nó khớp địa chỉ với thuộc tính

< .. name={variable}>

312 của một đối tượng

{{ variable }}{{ metadata.subtitle.value }}

995 duy nhất trong mảng. Trận đấu đầu tiên luôn thắng, vì vậy các tuyến trận đấu tất cả phải nằm ở cuối mảng

{{ variable }}{{ metadata.subtitle.value }}

996

Các tuyến phù hợp với tất cả ngăn ứng dụng bị sập nếu nó không thể khớp với tuyến hiện tại. Điều này có thể xảy ra từ thanh địa chỉ nơi người dùng có thể nhập bất kỳ tuyến đường nào. Đối với điều này, Angular cung cấp một giá trị đường dẫn ký tự đại diện

< .. name={variable}>

315 chấp nhận tất cả các tuyến đường. Lộ trình này thường hiển thị thành phần PageNotFoundComponent hiển thị “Lỗi 404. không tìm thấy trang”

< .. name={variable}>

02

Đối tượng

{{ variable }}{{ metadata.subtitle.value }}

995 chứa

< .. name={variable}>

317 ngăn không cho PageNotFoundComponent hiển thị do

< .. name={variable}>

318. Đây là tuyến đường về nhà của ứng dụng. Để khắc phục điều này,

< .. name={variable}>

317 định tuyến lại tuyến đường về nhà tới

< .. name={variable}>

307.

< .. name={variable}>

307 gián tiếp trở thành tuyến đường về nhà mới của ứng dụng

< .. name={variable}>

322 báo cho đối tượng

{{ variable }}{{ metadata.subtitle.value }}

995 khớp với tuyến đường về nhà (

< .. name={variable}>

318). Nó khớp với đường dẫn trống

Hai đối tượng

{{ variable }}{{ metadata.subtitle.value }}

995 mới này nằm ở cuối mảng vì trận đầu tiên thắng. Phần tử mảng cuối cùng (

< .. name={variable}>

326) luôn khớp nhau, vì vậy nó đi sau cùng

Có một điều cuối cùng cần giải quyết trước khi tiếp tục. Làm cách nào để người dùng biết vị trí của họ trong ứng dụng so với tuyến đường hiện tại? . Bằng cách đó, người dùng sẽ biết tuyến đường nào đang hoạt động cho trang web nhất định

đây là một cách sửa chữa dễ dàng. Khi bạn nhấp vào một phần tử ________ 3300, Angular ________ 3310 sẽ chỉ định tiêu điểm cho phần tử đó. Tiêu điểm này có thể kích hoạt các kiểu nhất định cung cấp phản hồi hữu ích cho người dùng. Chỉ thị

< .. name={variable}>

329 có thể theo dõi tiêu điểm này cho nhà phát triển

< .. name={variable}>

03

Phép gán đúng của

< .. name={variable}>

329 đại diện cho một chuỗi các lớp. Ví dụ này chỉ mô tả một lớp (

< .. name={variable}>

331), nhưng có thể áp dụng bất kỳ số lớp nào được phân cách bằng dấu cách. Khi

< .. name={variable}>

310 gán tiêu điểm cho một liên kết bộ định tuyến, các lớp được phân định bằng dấu cách sẽ áp dụng cho phần tử máy chủ. Khi tiêu điểm chuyển đi, các lớp sẽ tự động bị xóa

< .. name={variable}>

04

Giờ đây, người dùng có thể dễ dàng nhận ra tuyến đường hiện tại và nội dung trang trùng khớp như thế nào. Đánh dấu

< .. name={variable}>

333 áp dụng cho bộ định tuyếnLiên kết phù hợp với tuyến đường hiện tại.

< .. name={variable}>

334 đảm bảo tô sáng sẽ ghi đè kiểu nội tuyến

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để sử dụng InternalHTML trong AngularJS?

Chỉ thị ng-bind-html trong AngularJS được sử dụng để liên kết InternalHTML của phần tử HTML với dữ liệu ứng dụng và xóa mã nguy hiểm khỏi chuỗi HTML . Dịch vụ $sanitize là bắt buộc đối với chỉ thị ng-bind-html. Nó được hỗ trợ bởi tất cả các phần tử HTML.

Có an toàn khi sử dụng InternalHTML trong Angular không?

Đảm bảo rằng với tư cách là nhà phát triển, bạn đang tuân theo “Phương pháp góc cạnh” và các phương pháp hay nhất của nó để bảo vệ bạn khỏi XSS. Ví dụ: điều này có nghĩa là bạn không nên sử dụng InternalHTML , không bao giờ sử dụng các mẫu được tạo bằng cách ghép nối đầu vào của người dùng và không bao giờ sử dụng API DOM gốc để tương tác với các phần tử HTML.

Làm cách nào để lấy HTML bên trong trong Angular?

2 câu trả lời .

Solution 1:

But that will write out text, not HTML. .. .

Solution 2:

Note I moved the [innerHtml] to inside the div tag. .. .

Solution 3:

.

Tại sao nên sử dụng InternalHTML?

Thuộc tính innerHTML có thể được sử dụng để viết html động trên tài liệu html . Nó được sử dụng chủ yếu trong các trang web để tạo html động như biểu mẫu đăng ký, biểu mẫu nhận xét, liên kết, v.v.

programming html