Question

我对ionic还是陌生的，我们正在尝试构建一个阅读器应用程序，该应用程序可以从服务中以html格式下载文档，然后显示它们。我知道如何修改ionic应用程序本身的html，但是我们下载的文档显示在ionic应用程序内。我们要添加一个搜索功能，以查找并突出显示所有出现的输入单词。我们找到它们并通过将它们包装在具有设置黄色背景的css类的跨度中来突出显示它们。但这并不能反映应用程序中的更改。

从服务中下载文档，然后将其包装在div中，这是我们要做的事情，这是该应用程序中文档页面的document.html的摘录，也是下载内容所在的地方：

<ion-content id="content">
 <div [ngClass]="isNight ? 'night' : 'day'">
  <div [ngClass]="isSingle ? 'single' : 'double'">
   <div id="inputText" class="document" [innerHtml]="document | keepHtml" [ngStyle]="{'font-size': fontSize+'em' }"></div>
  </div>
 </div>
</ioncontent>

突出显示热门内容的javascript是，我省略了搜索框的内容，因为它实际上只是样板，突出显示方法是问题所在：

highlight(keyword) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  inputText.innerHTML = innerHTML.replace(new RegExp(keyword, 'g'), "<span class=\"keyword\">" + keyword + "</span>");
}

例如，如果用户搜索“ the”，则在highlight（）方法运行后，我们应该看到文档中以黄色突出显示的每个“ the”。但是我们没有。如果我们从div的文档中删除“ | keepHtml”，则搜索有效。

如果我们使用来自typescript方法的警报来显示html文档，则会看到我们的更改，但是如果我们在浏览器中运行javascript控制台并在浏览器的Dom中查看html，则所做的更改不会存在

我知道我缺少对离子/角的明显或基本的东西，但到目前为止我还看不到它是什么。也许我距离很远，没有人可以帮助我，但我想我会尝试一下。感谢您的理解。

添加keepHtml代码：

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

/**
 * Generated class for the KeepHtmlPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({ name: 'keepHtml', pure: false })
export class KeepHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

Answer 1

我们发现了问题； ionic / angular认为我们的HTML不安全。我们先对其进行消毒，然后再将其重新添加并起作用。

实际上，我们找到了两种解决方案，一种是在页面类中运行一个消毒器（对不起，如果我的口语表达不太正确，请问我经历了这么多的“未来之波”）在我的职业生涯中，他们都开始与bypassSecurityTrustHtml一起运行，另一个令人惊讶的是，将修改后的HTML而不是element.innerHTML添加回this.document中。

第二种解决方案看起来像是黑魔法，我不确定我是否理解它的工作原理。我实际上更喜欢第一个解决方案。

如何在离子应用程序中修改下载的html？

1 个答案: