在Angular 2中解析HTML字符串并提取和更新值 [英] Parse HTML string in Angular 2 and extract and update values
问题描述
我刚开始进行Angular项目,但有点卡住了.我有一个从(可信)外部源接收HTML字符串的组件.我想从此字符串中提取和更新值,并在我的组件中付清它.
I just started working on an Angular project but am a bit stuck. I have a component that receives an HTML string from a (trusted) external source. I want to extract and update values from this string, and dispay it in my component.
现在可以使用以下代码轻松显示字符串:
Now displaying the string is easily done with the following code:
<div [innerHTML]="displayString"></div>
我的输入字符串包含一些<span>
元素,并附加了data-card-text
元素作为标识符.是否可以提取该值,并在我的组件需要时更新它?
My input string has some <span>
elements with the data-card-text
element attached as identifier. Is it possible to extract this value, and update it whenever my component wants?
示例:
let displayString:string = "<svg><text data-card-text>Value I want to update</text></svg>"
这样的操作在Angular 2中是否可行?
Are operations like these even possible in Angular 2?
推荐答案
您必须创建一个共享服务,其中所有全局变量的定义如下.您的全局变量是" displayString "
You have to create one Shared Service in which all your global variables are defined like below. Your global variable is "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 的组件中访问此服务.
Now access this service in your component where you need to set/get displayString as below.
import { Shared, SharedModel } from '../Shared';
export class MyComponent {
public sharedData: SharedModel;
constructor(public sharedResource: Shared)
{
this.sharedData = sharedResource.SharedComponent;
}
}
分配值:(在您的情况下,可能在其他组件/服务/APi中)
Assign Value:(it may be in other component/service/APi in your case)
ngOnInit()
{
this.sharedData.dynamicValue="My name is SANDIP PATEL"
}
HTML中的
访问/获取值:
<div [innerHTML]="sharedData.displayString"></div>
这篇关于在Angular 2中解析HTML字符串并提取和更新值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!