1

我正在创建一个动态 Angular Web 应用程序，当从我的数据库中读取信息时，虽然我通过替换所有出现的\nto 来适应 html <br />，但 Angular 8 只会将此 html 代码呈现为文本，而不是出现新的换行符。

为了将 static 转换<br />为换行符（html 代码），我创建了一个自定义管道并尝试使用[InnerHtml]. 但是，这不起作用，现在网页不再显示我的数据库条目，而是显示消息“未定义”。

有谁知道这是为什么？

下面是我的自定义管道的代码：

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

以下是我的 app.compoment.ts，其中包括相关导入：

import { Component } from '@angular/core';
import { SafeHtmlPipe } from './pipe';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {PipeTransform, Pipe} from "@angular/core";

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

template: `
<input type="text" [(ngModel)]="html">
<div [innerHtml]="html">
</div>
`,

})
export class AppComponent {

name: string;
html: string;

  constructor() {

    this.name = 'Angular8';
    this.html = "<br />";
  }

下面是我的 [InnerHtml] 和我的 trees.component.html 页面上的自定义管道的用法。

<div [innerHtml]="html | safeHtml"  class="container" *ngFor="let tree of this.trees"><br>

        {{tree.p1}}
        {{tree.t2}}

</div>

任何帮助/建议将不胜感激，并提前感谢您！

4

1 回答 1

0

您是否需要使用 HTML 标记来分隔行？如果不再有任何 html 内容，那么您可以简单地将文本粘贴到<pre>标签中或添加到您的 div 块样式white-space: pre中。在您的情况下，innerHtml 将所有内容重写到 div 块中

于 2020-06-22T21:28:03.390 回答