Hướng dẫn angular render html with style - kết xuất góc cạnh html với phong cách

Tôi đang có một Util.ts xác định chức năng định dạng như dưới đây. Vấn đề là trên thẻ nhỏ có thuộc tính kiểu.

export const formatMessage = (message ) =>{
    return '' + message.name+" " +message.ts + '  ' + message.c;
  }

Tuy nhiên, khi kết xuất thuộc tính kiểu của thẻ nhỏ đang bị xóa.

Tôi không chắc tại sao hành vi này, mẫu chuỗi HTML được trả về bởi hàm định dạng được gắn vào HTML bằng cách sử dụng bên trong div như được hiển thị ở đây.

Tại sao thuộc tính kiểu này bị xóa (trong khi thuộc tính lớp ở lại) và làm thế nào để tôi giải quyết vấn đề?

Một thay thế

Nếu bạn tự động hiển thị một số nội dung HTML trong ứng dụng của mình, bạn có thể đã sử dụng InternalHTML, nhưng điều này có thể được thực hiện một cách an toàn hơn không? Hãy cùng xem ví dụ này.example.

Trong ứng dụng này, tôi đã sử dụng thư viện dịch Ngx-dịch. Tôi có một tiêu đề, bộ chọn ngôn ngữ và một liên kết được hiển thị động.ngx-translate. I have a header, language selector, and a dynamically rendered link.

Để tái cấu trúc điều này theo cách tiếp cận mà không có bên trong,innerHtml,

1. Cập nhật từng tệp dịch để có SXM_LINK.TEXT ,,

Với bên tronginnerHtml:

Angular tích hợp hỗ trợ các lỗ hổng và tấn công trong một ứng dụng web như kịch bản trang web chéo, tuy nhiên đôi khi trong ứng dụng của chúng tôi, chúng tôi muốn hiển thị chuỗi HTML thông qua việc bỏ qua bảo mật của Angular.

Để bỏ qua bảo mật, chính Angular cung cấp một số phương thức và chỉ thị mà chúng ta có thể hiển thị hoặc hiển thị chuỗi HTML trong góc.

Có hai cách để hiển thị chuỗi HTML

1. Chỉ thị InnerHTML - chỉ hiển thị các thẻ HTML đơn giản và thẻ kiểu
2. Domsanitizer - Kết xuất HTML với thẻ kiểu và thẻ kiểu nhưng cũng xóa các tập lệnh

Cú pháp đơn giản cho

Cú pháp đơn giản cho

 this.safehtmlStr=dom.bypassSecurityTrustHtml(this.html);

Ví dụ 1: InsideHtml để hiển thị chuỗi

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newapp';
  html:string="
String with color:red 
google.com"
 
  constructor(){
     
  }
}

và HTML

Simple HTML only without style(Removed)

Ví dụ 2: InsideHtml để hiển thị chuỗi

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newapp';
  html:string="
String with color:red 
google.com"
  safehtmlStr:SafeHtml;

  constructor( public dom:DomSanitizer){
      this.safehtmlStr=dom.bypassSecurityTrustHtml(this.html);
  }
}

và HTML

 HTML With style

Ví dụ 2: InsideHtml để hiển thị chuỗi

Hiển thị chuỗi HTML trong góc

Như bạn có thể thấy, chúng tôi đã sử dụng ở đây

1 và phương pháp của nó

3 để vệ sinh chuỗi HTML nhưng nó loại bỏ thẻ tập lệnh và chỉ giữ kiểu HTML và nội tuyến.

Tạo một đường ống cho HTML an toàn để sử dụng toàn cầu

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'safehtml'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any): SafeHtml {
      return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

Chúng tôi cũng có thể tạo một đường ống cho HTML an toàn để chúng tôi có thể sử dụng nó trên toàn cầu trong ứng dụng của chúng tôi như dưới đây

HTML with pipe

và trong HTML

Ví dụ trực tiếp:

Làm cách nào để hiển thị một chuỗi với thẻ HTML trong Angular 8?

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

Làm cách nào để thêm một kiểu vào tệp TS?

Làm cách nào để viết mã HTML trong tệp TS trong Angular 8?