如何从 safeHtml 获取 div 的 id？答案

【问题标题】：How to get id of a div from safeHtml?如何从 safeHtml 获取 div 的 id？
【发布时间】：2021-10-05 07:02:02
【问题描述】：

我在数据库中保存了一个 html，它是通过 API 调用获得的。这是回复

例如

htmlText = <div class="dragBlock"> 
                <div id="Name">Test</div>
                 <div id="Age">23</div>
           </div>

鉴于我将其显示为

<div class="preview">
    <div [innerHtml] = "htmlText | safeHtml"> </div>
 </div>

这很好用，但我想更改 id 名称和年龄的内部 Html

在 ts 文件中我正在这样做

document.getElementById('Name').innerHtml = 'UserName';

但这不起作用，我们可以在 Angular 中做到这一点吗？如果是怎么办？

【问题讨论】：

我建议您从 API 传递 JSON 数据（如果可能的话）并在您操作后在客户端呈现 HTML，根据您的需要。
这只是一个示例，实际的 HTML 很大。我正在从一个组件设计它，我想在另一个具有不同数据的组件中使用相同的设计

标签： javascript angular typescript innerhtml

【解决方案1】：

你需要像这样使用它：

document.getElementById('Name').innerHTML = 'UserName';

查看此 Stackblitz：https://stackblitz.com/edit/angular-sbxeon?file=src%2Fapp%2Fapp.component.ts

【讨论】：

这在正常情况下有效，而不是在

时。请阅读问题
检查这个stackblitz.com/edit/…，它对我有用。
酷它工作.. 我需要改变我的代码结构。谢谢
太好了，如果它对您有用，您愿意接受/投票吗？

【解决方案2】：

您可以使用管道来操作 HTML。

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Pipe({
    name: 'modify'
  })
  export class ModifyPipe implements PipeTransform {
  
    constructor(private _domSanitizer: DomSanitizer) {}
  
    transform(html: string, args?: any): any {
      return this._domSanitizer.bypassSecurityTrustHtml(this.modify(html));
    }
  
    private modify(html: string): string {
      // Do your manipulation here by replacing with regex
      return string;
    }
  
  }


  <p [innerHTML]="htmlText | modify"></p>

【讨论】：