Làm cách nào để có được HTML bên trong trong góc?

Thí dụ

Nhận nội dung HTML của một phần tử với id="myP"

hãy để html = tài liệu. getElementById("myP"). bên trongHTML;

Tự mình thử »

Thay đổi nội dung HTML của một phần tử với id="demo"

tài liệu. getElementById("bản trình diễn"). innerHTML = "Tôi đã thay đổi. “;

Tự mình thử »

Lấy nội dung HTML của một

phần tử có id="myList"

hãy để html = tài liệu. getElementById("myList"). bên trongHTML;

Tự mình thử »

Xóa nội dung HTML của một

phần tử có id="demo"

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Thuộc tính innerHTML đặt hoặc trả về nội dung HTML (HTML bên trong) của một phần tử

Sự khác biệt giữaInternalHTML, InternalText và TextContent

Xem bên dưới

---

cú pháp

Trả về thuộc tính InternalHTML

Đặt thuộc tính InternalHTML

Giá trị tài sản

Thuộc tínhMô tảStringNội dung HTML

Giá trị trả về

TypeDescriptionStringNội dung HTML của phần tử

---

---

Thêm ví dụ

Thí dụ

Thay đổi nội dung HTML của hai phần tử

hãy để văn bản = "Xin chào Dolly. “;
tài liệu. getElementById("myP"). bên trongHTML = văn bản;
tài liệu. getElementById("myDIV"). bên trongHTML = văn bản;

Tự mình thử »

Thí dụ

Lặp lại nội dung HTML của một phần tử

yếu tố. phần tử bên trongHTML +=. bên trongHTML;

Tự mình thử »

Thí dụ

Thay đổi nội dung HTML và URL của một liên kết

yếu tố. innerHTML = "W3Schools";
yếu tố. href = "https. //www. w3schools. com";

Tự mình thử »

---

Sự khác biệt giữaInternalHTML, InternalText và TextContent

Thuộc tính innerHTML trả về
Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và các thẻ HTML bên trong. Thuộc tính InternalText trả về
Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có khoảng cách văn bản và thẻ ẩn CSS, ngoại trừ

Các chuỗi được hiển thị trong Angular sử dụng cú pháp nội suy

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

0. Angular hỗ trợ chuỗi hiển thị có chứa các thẻ HTML thô sử dụng thuộc tính

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

1. Đó là một thẻ HTML tiêu chuẩn hỗ trợ góc sử dụng cú pháp liên kết thuộc tính

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

2 như được đưa ra bên dưới

Làm cách nào để hiển thị HTML bên trong liên kết Góc?

Góc hỗ trợ liên kết HTML thô bằng thuộc tính thẻ InternalHtml

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

InternalHTML được sử dụng để làm gì?

thuộc tính innerHtml cho các phần tử HTML được sử dụng để thêm hoặc cập nhật nội dung như RAW HTML hoặc XML. HTML tiêu chuẩn hỗ trợ thẻ này trong tất cả các trình duyệt mới nhất. Nó cũng được triển khai trong một khung có liên kết 2 chiều trong khung Angular

Ví dụ ràng buộc về góc 14 InternalHtml

Trong Angular, thật đơn giản để liên kết các thuộc tính và sự kiện bằng cú pháp liên kết hai chiều

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

3 có thể được thực hiện bằng cú pháp bên dưới

[property]="javascriptexpression"

Cú pháp

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

4 như bên dưới

________số 8_______

Hai ràng buộc trên như ràng buộc Thuộc tính và sự kiện có thể được viết bằng i. ràng buộc hai chiều

cú pháp là

[(property)]="javascriptexpression"

Biểu thức JavaScript là giá trị và thuộc tính từ đối tượng json hoặc hàm JavaScript

Giả sử, Đôi khi chúng tôi muốn liên kết phản hồi HTML thay vì phản hồi JSON ở dạng chuỗi

Liên kết HTML hoạt động như thế nào trong các ứng dụng Angular?

sử dụng liên kết thuộc tính

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

5, Chúng tôi có thể liên kết nội dung HTML dưới dạng chuỗi

Thuộc tính

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

5 có thể được thêm vào thẻ HTML theo hai cách

cú pháp

Đây là một thành phần bản thảo

Đã tạo nội dung biến để giữ chuỗi thẻ HTML

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  content: string;
  constructor() {
    this.content = "html response";
  }
}

Đây là thành phần HTML

Angular coi nội dung InternalHtml là không an toàn, vì vậy nó sẽ tự động khử trùng

  Angular html binding Innerhtml example

Có một hạn chế đối với phương pháp này

Khi nội dung HTML thô được chuyển đến thành phần góc cạnh, chúng tôi phải kiểm tra xem HTML có đáng tin cậy hay không

Sau đó, Làm cách nào để vệ sinh HTML thô Angular theo cách thủ công?

• đã nhập

  export class FirstComponent {
    rawHtml: string = 'Hello  User, Welcome to my site';
  }
  

  7 trong thành phần góc
• khai báo nội dung biến kiểu

  export class FirstComponent {
    rawHtml: string = 'Hello  User, Welcome to my site';
  }
  

  8
• Vượt qua nội dung bypassSecurityTrustHtml và trả lại nội dung chuỗi HTML an toàn và đáng tin cậy

import { Component } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  content: SafeHtml;
  constructor(private sanitizer: DomSanitizer) {
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      "html response"
    );
  }
}

Trình xử lý sự kiện InternalHtml góc bên trong ví dụ nội dung HTML

Nội dung chuỗi thẻ HTML chứa các sự kiện như một phần của nội dung. Sau đó, làm cách nào để bạn bắt đầu trình xử lý liên kết sự kiện nhấp chuột?

Trong các sự kiện Góc, người nghe được gắn vào trình xử lý sau khi nội dung được tải

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

9 phương thức gọi được sử dụng là phương thức gọi lại chạy bất cứ khi nào phát hiện thay đổi

Trong ví dụ bên dưới, định nghĩa nút được hiển thị bằng cách sử dụng InternalHtml

Khi nút được hiển thị, Chúng tôi sẽ thêm liên kết sự kiện nhấp chuột vào nút bên trong

[property]="javascriptexpression"

0. Phương thức ElementRef

[property]="javascriptexpression"

1 được sử dụng để chọn Nút DOM bằng cách sử dụng id

Đây là một ví dụ hoàn chỉnh cho trình xử lý sự kiện cho InternalHtml

import { Component, ElementRef } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  content: SafeHtml;

  constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) {
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      'Submit'
    );
  }
  openWindow() {
    alert("Welcome");
  }
  ngAfterViewChecked() {
    if (this.elementRef.nativeElement.querySelector("#submitButton")) {
      this.elementRef.nativeElement
        .querySelector("#submitButton")
        .addEventListener("click", this.openWindow.bind(this));
    }
  }
}

mã stackblitz

Bạn có thể tìm mã cho hướng dẫn này

Phần kết luận

tóm lại, các thuộc tính của Angular

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

5 cung cấp một liên kết động của nội dung chuỗi HTML và cũng bằng cách sử dụng

export class FirstComponent {
  rawHtml: string = 'Hello  User, Welcome to my site';
}

9, chúng tôi có thể liên kết các trình lắng nghe sự kiện

Làm cách nào để hiển thị dữ liệu HTML trong Angular?

Làm cách nào để xác định InternalHTML trong Angular?

Làm cách nào để thêm mã HTML vào Angular?

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