javascript - 从 JSON 渲染 Html 而不显示 Angular 4 中样式标签的内容

Question

我的 JSON 看起来像这样

{
    "product_details": {
        "description": "<style> img {width: 320px; height: auto;}</style>Apple iPhone 6 Gold , 128 GB New"
    }
}

我有一个类似这样的组件模板:

<div class="panel-body" [innerHTML]="product_detail.description"></div>

如果我尝试在浏览器中呈现它，它会像这样显示。

img {宽度:320px; height: auto; Apple iPhone 6 Gold，128 GB 全新

不应显示样式标签的内容。

请帮我想办法让它工作。

Answer 1

在 Angular 中，您可以使用自定义管道来过滤 product_detail.description

这是一个 plunker of that method ，像这样实现它:

<div class="panel-body" [innerHTML]="product_detail.description | getUnstyledText"></div>

@Pipe({name: 'getUnstyledText'})
export class GetUnstyledTextPipe implements PipeTransform {
  transform(text: string): string {
    let splitArray = text.split('</style>');
    return splitArray[splitArray.length-1];
  }
}

上面的例子是实现这个普通的JS，对字符串进行拆分操作来获取你想要的文本:

var string = "<style> img {width: 320px; height: auto;}</style>Apple iPhone 6 Gold , 128 GB New";

var splitString = string.split('</style>')

console.log(splitString[splitString.length-1]);