Hướng dẫn angular string interpolation innerhtml - nội suy chuỗi góc bên trong html

Tôi đang thiết kế một trò chơi, và tôi đang tự động tạo ra các tuyên bố với chỗ trống bên trong và yêu cầu người chơi điền vào chỗ trống. Tôi cần nội suy chuỗi để ghi lại đầu vào của người dùng, nhưng tôi cũng cần thiết lập Dynamic InnerHTML vì các chỗ trống có thể ở bất cứ đâu trong câu lệnh.

Tôi biết điều này nghe có vẻ mơ hồ, đây là các ví dụ mã có liên quan:

app.component.html

app.component.ts

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

questionStatement có thể có

ở bất cứ đâu trong câu, do đó cần có điểm vào động.

Ở đây, nội suy chuỗi ({{display}}) không hoạt động trong

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

0. Nó sẽ hiển thị trên màn hình theo nghĩa đen là {{display}}. Tôi có thể làm gì trong trường hợp này?

Giới thiệu

Angular 2+ hỗ trợ một liên kết thuộc tính

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2 sẽ khiến HTML hiển thị. Nếu bạn sử dụng phép nội suy, nó sẽ được coi là một chuỗi.

Trong bài viết này, bạn sẽ được trình bày cách sử dụng

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2 và một số cân nhắc cho việc sử dụng.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi cùng với bài viết này, bạn sẽ cần:

• Một số quen thuộc với nội suy góc và liên kết tài sản cũng có thể hữu ích.

Bước 1 - Sử dụng display=50; questionStatement='

{{display}}%

of Americans have a university degree.' questionStatementExample2='Canada is

{{display}}%

the size of America.' sliderMoved(event: any) {this.display=event.target.value;} 0

Với mục đích của bài viết này, giả sử bạn đang làm việc với một thành phần có chứa

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

5 bao gồm hỗn hợp các thực thể và yếu tố HTML và các yếu tố HTML:

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

Hãy cùng xem xét một mẫu sử dụng phép nội suy trên chuỗi này:

<div>{{ htmlStr }}div>

Sau khi biên dịch, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & amp; Ví dụ văn bản táo bạo

Các thực thể HTML và các yếu tố HTML không được hiển thị.

Bây giờ, hãy để Lừa xem xét một mẫu sử dụng thuộc tính

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2 ràng buộc trên chuỗi này:

<div [innerHTML]="htmlStr">div>

Sau khi biên dịch lại, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & ví dụ văn bản táo bạoBold Text Example

Quan sát rằng các thực thể HTML và các yếu tố HTML được hiển thị.

Bước 2 - Hiểu những hạn chế

Kết xuất HTML thường có khả năng giới thiệu kịch bản trang web chéo (XSS). HTML được kết xuất có thể chứa các tập lệnh độc hại trình bày một vấn đề bảo mật.

Một phương pháp giải quyết XSS là bằng cách hạn chế các loại phần tử và thuộc tính HTML cho một tập hợp các phần tử và thuộc tính an toàn đã biết.

Đằng sau.

Lưu ý: Danh sách đầy đủ các phần tử và thuộc tính HTML được phê duyệt có thể được quan sát trong

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

9. The full list of approved HTML elements and attributes can be observed in

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

9.

Điều này sẽ hạn chế các giá trị

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2 của bạn từ việc sử dụng các thẻ

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

1 và

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

2 và các thuộc tính

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

3. Hãy ghi nhớ giới hạn này khi chọn sử dụng

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2.

Sự kết luận

Trong bài viết này, bạn đã được giới thiệu về liên kết tài sản

display=50;

questionStatement='
{{display}}%
 
                   of Americans have a university degree.'

questionStatementExample2='Canada is 
{{display}}%
 
                           the size of America.'

sliderMoved(event: any) {this.display=event.target.value;}  

2 trong góc 2+. Nó sẽ dẫn đến việc hiển thị đánh dấu HTML có trong một chuỗi.

Nếu bạn muốn tìm hiểu thêm về Angular, hãy xem trang chủ đề Angular của chúng tôi cho các bài tập và các dự án lập trình.

Để chuẩn bị cho Hub Brunswick Barcamp sắp tới, tôi đã cập nhật trang hội nghị với các ý tưởng cho các cuộc nói chuyện và diễn giả.Để hiển thị các loa, chúng tôi đang sử dụng băng chuyền Primeng.Thành phần này hiển thị nội dung bằng cách sử dụng hiệu ứng slide.Để thành phần này hoạt động, nội dung phải được xác định trong bộ điều khiển, không phải mẫu HTML.Điều này tạo ra vấn đề sau: Sử dụng phép nội suy chuỗi, các chuỗi được xác định trong bộ điều khiển có thể được hiển thị trong mẫu HTML một cách dễ dàng.Tuy nhiên, chúng được hiển thị chính xác cách chúng được xác định.Do đó, định dạng với HTML / CSS không phải là một tùy chọn vì các thẻ sẽ không được giải thích.

Giải pháp nằm trong Chỉ thị bên trong:

 [innerHTML]=talk.text>

talksBestPractice: Talk[];
 
constructor() {
this.talksBestPractice = [
  {
	portrait: 'speaker.jpg',
	speaker: 'Joe Speaker',
	text: 'My ultra cool talk.'
  }};