Question

我想问一下如何将HTML格式字符串从.component.ts文件传输到.component.html文件中。

在我的应用程序中有一个布局文件夹。 layout.component.ts文件的代码为：

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})

export class LayoutComponent implements OnInit {
  htmlText: string;

  constructor() {
   }

  ngOnInit() {
    this.htmlText = '<b>title</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>';
  }
}

文本及其HTML格式均已定义。因此，我想在浏览器中显示带有自己HTML定义的文本。

layout.component.html文件如下所示：

<h2>{{ htmlText }}</h2>

编译浏览器后会显示htmlText字符串的全文，但HTML格式只是被忽略了。

我做错了什么？感谢任何提示+帮助。

Answer 1

使用以下代码创建管道：

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


@Pipe({ name: 'keepHtml', pure: false })
export class SafePipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {
}

public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
    case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
    case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
    case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
    case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
    case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
    default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
}
}
}

并在html文件中使用以下代码行：

<div [innerHtml]="htmlBody | keepHtml: 'html'"></div>

Answer 2

只需要使用[innerHTML]

<div [innerHtml]="htmlText"></div>

这就够了。

如何将HTML-String从component.ts传输到component.html

2 个答案: