在Angular 2中解析HTML字符串并提取和更新值

Question

我刚刚开始研究一个Angular项目但是有点卡住了.我有一个组件从(可信的)外部源接收HTML字符串.我想从这个字符串中提取和更新值,并在我的组件中显示它.

现在可以使用以下代码轻松完成字符串的显示:

<div [innerHTML]="displayString"></div>

我的输入字符串有一些<span>元素,data-card-text元素作为标识符附加.是否可以提取此值,并在我的组件需要时更新它？

例: let displayString:string = "<svg><text data-card-text>Value I want to update</text></svg>"

在Angular 2中,甚至可以进行这样的操作吗？

Answer 1

您必须创建一个共享服务,其中所有全局变量的定义如下所示.你的全局变量是" displayString "

export interface SharedModel {
    displayString: string;
    dynamicValue: string;
}

@Injectable()
export class Shared {
    SharedComponent: SharedModel = {
           dynamicValue:'',
           displayString: '<svg><text data-card-text>'+this.SharedComponent.dynamicValue+'</text></svg>'
    };
}

现在,在您需要设置/获取displayString的组件中访问此服务,如下所示.

import { Shared, SharedModel } from '../Shared';
export class MyComponent {
     public sharedData: SharedModel;
     constructor(public sharedResource: Shared)
     {
         this.sharedData = sharedResource.SharedComponent;
     }
}

分配值:(在您的情况下,它可能在其他组件/服务/ APi中)

ngOnInit()
{
     this.sharedData.dynamicValue="My name is SANDIP PATEL"
}

访问/获取 HTML中的值:

<div [innerHTML]="sharedData.displayString"></div>

Answer 2

您可以从平台浏览器模块使用 DomSanitizer

import {DomSanitizer} from '@angular/platform-browser';

通过在构造函数中初始化它，将 DomSanitizer 注入到你的组件中

  constructor(private domSanitizer: DomSanitizer)

使用 DomSanitizer 的 bypassSecurityTrustHtml() 并传递您的原始 html 内容：

this.displayString= this.domSanitizer.bypassSecurityTrustHtml("<svg><text data-card-text>Value I want to update</text></svg>");

我希望这能解决你的问题。