在一个div下直接循环出html标签(如svg).
<div class="display-footer-content-box"
fxLayout="row"
fxLayoutAlign="start none"
fxLayoutGap="16px"
*ngFor="let security of securitys"
fxFlex="32">
<div class="display-footer-content-box-img"
fxLayout="row"
fxLayoutAlign="start none"
[innerHTML]="security?.svgHtml | safeHtml:'html'">
</div>
</div>
securitys:
this.securitys = [
{
title: 'xxx',
svgHtml: `
<svg xmlns="http://www.w3.org/2000/svg" width="40.696" height="48.793" viewBox="0 0 40.696 48.793">
<g id="组_2929" data-name="组 2929" transform="translate(-333.252 -521.685)">
<g id="组_2797" data-name="组 2797" transform="translate(333.553 522)">
<path id="路径_5336" data-name="路径 5336" d="M89.044,6.082,108.241,0l19.2,6.083-.12,23.935v0a15.677,15.677,0,0,1-4.468,7.543c-3.283,3.224-12.119,7.626-13.856,8.476l-.867.439-.706-.382c-.152-.085-.39-.21-.7-.374l-.312-.164,0,0c-2.975-1.558-9.934-5.206-12.773-8a15.778,15.778,0,0,1-4.464-7.527l0-.015-.021-.257Zm31.718,29.439a13.393,13.393,0,0,0,3.628-5.923l.087-21.416L108.241,3.037,92.006,8.182,92.094,29.6a13.342,13.342,0,0,0,3.63,5.923c2.532,2.491,9.469,6.125,12.083,7.494.124.067.242.127.353.183l.019.009c2.178-1.084,9.845-4.995,12.583-7.686Z" transform="translate(-89.044)" fill="#3b86ff" stroke="#fff" stroke-width="0.6"/>
<path id="路径_5337" data-name="路径 5337" d="M356.174,306.689l6.669-3.941,6.669,3.941v7.881l-6.669,3.94-6.669-3.94Zm7.011,9.942v-5.79l5.024-2.969-.333-.591-5,2.952-4.885-2.886-.333.591,4.858,2.87v5.824h.666Z" transform="translate(-344.049 -289.007)" fill="#3b86ff" stroke="#fff" stroke-width="0.6"/>
</g>
<g id="组_2800" data-name="组 2800" transform="translate(335.553 524)" opacity="0.31">
<path id="路径_5336-2" data-name="路径 5336" d="M89.044,6.082,108.241,0l19.2,6.083-.12,23.935v0a15.677,15.677,0,0,1-4.468,7.543c-3.283,3.224-12.119,7.626-13.856,8.476l-.867.439-.706-.382c-.152-.085-.39-.21-.7-.374l-.312-.164,0,0c-2.975-1.558-9.934-5.206-12.773-8a15.778,15.778,0,0,1-4.464-7.527l0-.015-.021-.257Zm31.718,29.439a13.393,13.393,0,0,0,3.628-5.923l.087-21.416L108.241,3.037,92.006,8.182,92.094,29.6a13.342,13.342,0,0,0,3.63,5.923c2.532,2.491,9.469,6.125,12.083,7.494.124.067.242.127.353.183l.019.009c2.178-1.084,9.845-4.995,12.583-7.686Z" transform="translate(-89.044)" fill="#3b86ff"/>
<path id="路径_5337-2" data-name="路径 5337" d="M356.174,306.689l6.669-3.941,6.669,3.941v7.881l-6.669,3.94-6.669-3.94Zm7.011,9.942v-5.79l5.024-2.969-.333-.591-5,2.952-4.885-2.886-.333.591,4.858,2.87v5.824h.666Z" transform="translate(-344.049 -289.007)" fill="#3b86ff"/>
</g>
</g>
</svg>`,
desc: 'xxx'
},
{
title: 'xxx',
svgHtml: `
<svg xmlns="http://www.w3.org/2000/svg" width="41.628" height="43.232" viewBox="0 0 41.628 43.232">
<g id="组_2930" data-name="组 2930" transform="translate(-331.558 -642)">
<g id="组_2796" data-name="组 2796" transform="translate(331.558 642)">
<path id="路径_5338" data-name="路径 5338" d="M169.315,139.7l10.677,6.143L180,156.855l9.707,5.588.011,12.319-10.66,6.171-9.662-5.56-9.612,5.56-10.677-6.143-.011-12.324,9.567-5.537-.017-11.058Z" transform="translate(-149.094 -139.7)" fill="#fff"/>
<path id="路径_5339" data-name="路径 5339" d="M340.177,374.107V365l-.56.325-.56-.325v9.091l.577.331ZM330.06,381.92l-.56-.319v9.085l.577.331.544-.314v-9.1Zm19.834,8.782v-9.1l-.112.062a.564.564,0,0,1-.645-.919.566.566,0,0,0-.37.527v9.41l.577.331Z" transform="translate(-319.384 -352.373)" fill="#3b86ff"/>
<path id="路径_5340" data-name="路径 5340" d="M602.749,563.7l.471.269A.552.552,0,0,0,602.749,563.7Zm.482.292v.532A.545.545,0,0,0,603.231,563.992Zm-9.92,3.34-.488-.28a.562.562,0,1,0-.56.975l.487.28a.562.562,0,0,0,.56-.975Zm-2.432-1.4-.488-.28a.562.562,0,0,0-.56.975l.488.28a.562.562,0,0,0,.56-.975Z" transform="translate(-564.857 -539.937)" fill="#3b86ff"/>
<path id="路径_5341" data-name="路径 5341" d="M562.352,563.98c0-.005-.006-.005-.006-.011l-.471-.269a.609.609,0,0,0-.292.073l-.487.28a.562.562,0,0,0,.56.975l.488-.28a.571.571,0,0,0,.213-.219V564A.024.024,0,0,0,562.352,563.98Zm-8.048,4-.488.28a.4.4,0,0,0-.078.056.558.558,0,0,0-.123.712.568.568,0,0,0,.768.207l.112-.062.375-.219a.564.564,0,1,0-.566-.975Zm-6.725-3.436-.488-.28a.562.562,0,1,0-.56.975l.488.28a.562.562,0,0,0,.56-.975Zm11.579.633-.488.28a.562.562,0,0,0,.56.975l.488-.28a.562.562,0,1,0-.56-.975Zm-2.427,1.4-.487.28a.562.562,0,0,0,.56.975l.488-.28a.562.562,0,1,0-.56-.975Z" transform="translate(-523.984 -539.937)" fill="#3b86ff"/>
<path id="路径_5342" data-name="路径 5342" d="M189.616,162.443l-9.707-5.588-.011-11.013L169.221,139.7l-10.665,6.171.011,11.058L149,162.471l.017,12.319,10.676,6.148,9.606-5.565,9.662,5.565,10.66-6.171Zm-20.395-20.154,7.869,4.528-7.863,4.54-7.869-4.523Zm-9.556,16.595,7.869,4.528-7.863,4.54L151.8,163.43Zm.572,19.145-.544.314-.577-.331-7.857-4.523-.011-9.085,7.869,4.523.56.325.56-.325,7.869-4.54.011,9.085Zm9.012-16.281-.577-.331-7.857-4.523-.011-9.085,7.869,4.517.56.325.56-.325,7.869-4.54.011,9.085-7.88,4.562Zm18.136,11.719-7.88,4.562-.544.314-.577-.331-7.857-4.523-.006-9.729,8.424-4.876,7.953,4.579a.57.57,0,0,1,.471.269l.011.006v.017a.545.545,0,0,1,0,.532Z" transform="translate(-149 -139.7)" fill="#3b86ff"/>
</g>
<g id="组_2801" data-name="组 2801" transform="translate(331.559 643)" opacity="0.31">
<path id="路径_5338-2" data-name="路径 5338" d="M169.315,139.7l10.677,6.143L180,156.855l9.707,5.588.011,12.319-10.66,6.171-9.662-5.56-9.612,5.56-10.677-6.143-.011-12.324,9.567-5.537-.017-11.058Z" transform="translate(-148.094 -138.7)" fill="#fff"/>
<path id="路径_5342-2" data-name="路径 5342" d="M189.616,162.443l-9.707-5.588-.011-11.013L169.221,139.7l-10.665,6.171.011,11.058L149,162.471l.017,12.319,10.676,6.148,9.606-5.565,9.662,5.565,10.66-6.171Zm-20.395-20.154,7.869,4.528-7.863,4.54-7.869-4.523Zm-9.556,16.595,7.869,4.528-7.863,4.54L151.8,163.43Zm.572,19.145-.544.314-.577-.331-7.857-4.523-.011-9.085,7.869,4.523.56.325.56-.325,7.869-4.54.011,9.085Zm9.012-16.281-.577-.331-7.857-4.523-.011-9.085,7.869,4.517.56.325.56-.325,7.869-4.54.011,9.085-7.88,4.562Zm18.136,11.719-7.88,4.562-.544.314-.577-.331-7.857-4.523-.006-9.729,8.424-4.876,7.953,4.579a.57.57,0,0,1,.471.269l.011.006v.017a.545.545,0,0,1,0,.532Z" transform="translate(-149 -139.7)" fill="#3b86ff"/>
</g>
</g>
</svg> `,
desc: 'xxx'
},
{
title: 'xxx',
svgHtml: `
<svg xmlns="http://www.w3.org/2000/svg" width="41.974" height="41.975" viewBox="0 0 41.974 41.975">
<g id="组_2931" data-name="组 2931" transform="translate(-331.559 -760.999)">
<g id="组_2803" data-name="组 2803" transform="translate(332.559 762)" opacity="0.31">
<path id="路径_5334" data-name="路径 5334" d="M117.712,122.569a1.619,1.619,0,1,0-1.619-1.619,1.619,1.619,0,0,0,1.619,1.619Zm0-4.047a2.428,2.428,0,1,1-2.428,2.428,2.428,2.428,0,0,1,2.428-2.428Zm0,5.666c3.576,0,6.476-1.45,6.476-3.238s-2.9-3.238-6.476-3.238-6.476,1.45-6.476,3.238,2.9,3.238,6.476,3.238Zm0-8.095c4.471,0,8.095,2.174,8.095,4.857s-3.624,4.857-8.095,4.857-8.095-2.174-8.095-4.857,3.624-4.857,8.095-4.857Zm-4.374-4.857h1.6a25.64,25.64,0,0,1-.626,3.238h-1.6a23.6,23.6,0,0,0,.62-3.238Zm10.691-7.973A18.616,18.616,0,0,0,109.107,87.3c3.342,3.246,6.177,10.2,6.177,18.272,0,.546-.016,1.083-.034,1.619h-1.615c.017-.534.03-1.073.03-1.619,0-9.923-4.374-18-8.095-18.552v13.7c1.677,0,4.918.054,6.476.147v1.587c-1.551-.073-4.793-.115-6.476-.115v4.857h-.809v-4.854c-2.023.012-4.912.065-6.476.151V100.91c1.574-.11,4.459-.178,6.476-.193v-13.7c-3.721.555-8.095,8.628-8.095,18.551,0,.546.013,1.085.03,1.619H95.082c-.019-.536-.035-1.073-.035-1.619,0-7.87,2.691-14.674,5.922-18.021a18.613,18.613,0,0,0-13.855,15.689,20.43,20.43,0,0,1,7.123-1.929v1.5c-5.334.57-7.285,1.591-7.285,2.759,0,1.788,8.335,3.238,18.618,3.238s18.618-1.45,18.618-3.238c0-1.227-2.308-2.295-8.095-2.844v-1.513c3.779.446,6.382,1.165,7.936,2.05Zm-2.12,11.211a18.5,18.5,0,0,0,2.166-6.944c-3.142,1.7-10.238,2.9-18.505,2.9s-15.361-1.191-18.5-2.9a18.615,18.615,0,0,0,13.712,16.011c-2.519-2.522-4.732-6.952-5.388-12.306h1.6c.848,7.187,4.744,12.462,7.768,12.9v-12.9h.809v12.893A5.023,5.023,0,0,0,108,122.892v2.755a20.377,20.377,0,0,1-2.428.159h-.809v-.039l-.037,0a20.209,20.209,0,0,1,.037-40.386v-.045h.809a20.2,20.2,0,0,1,18.152,29.141Z" transform="translate(-85.333 -85.333)" fill="#3b86ff" stroke="#3b86ff" stroke-width="1"/>
</g>
<g id="组_2798" data-name="组 2798" transform="translate(331.559 760.999)">
<path id="路径_5334-2" data-name="路径 5334" d="M117.712,122.569a1.619,1.619,0,1,0-1.619-1.619,1.619,1.619,0,0,0,1.619,1.619Zm0-4.047a2.428,2.428,0,1,1-2.428,2.428,2.428,2.428,0,0,1,2.428-2.428Zm0,5.666c3.576,0,6.476-1.45,6.476-3.238s-2.9-3.238-6.476-3.238-6.476,1.45-6.476,3.238,2.9,3.238,6.476,3.238Zm0-8.095c4.471,0,8.095,2.174,8.095,4.857s-3.624,4.857-8.095,4.857-8.095-2.174-8.095-4.857,3.624-4.857,8.095-4.857Zm-4.374-4.857h1.6a25.64,25.64,0,0,1-.626,3.238h-1.6a23.6,23.6,0,0,0,.62-3.238Zm10.691-7.973A18.616,18.616,0,0,0,109.107,87.3c3.342,3.246,6.177,10.2,6.177,18.272,0,.546-.016,1.083-.034,1.619h-1.615c.017-.534.03-1.073.03-1.619,0-9.923-4.374-18-8.095-18.552v13.7c1.677,0,4.918.054,6.476.147v1.587c-1.551-.073-4.793-.115-6.476-.115v4.857h-.809v-4.854c-2.023.012-4.912.065-6.476.151V100.91c1.574-.11,4.459-.178,6.476-.193v-13.7c-3.721.555-8.095,8.628-8.095,18.551,0,.546.013,1.085.03,1.619H95.082c-.019-.536-.035-1.073-.035-1.619,0-7.87,2.691-14.674,5.922-18.021a18.613,18.613,0,0,0-13.855,15.689,20.43,20.43,0,0,1,7.123-1.929v1.5c-5.334.57-7.285,1.591-7.285,2.759,0,1.788,8.335,3.238,18.618,3.238s18.618-1.45,18.618-3.238c0-1.227-2.308-2.295-8.095-2.844v-1.513c3.779.446,6.382,1.165,7.936,2.05Zm-2.12,11.211a18.5,18.5,0,0,0,2.166-6.944c-3.142,1.7-10.238,2.9-18.505,2.9s-15.361-1.191-18.5-2.9a18.615,18.615,0,0,0,13.712,16.011c-2.519-2.522-4.732-6.952-5.388-12.306h1.6c.848,7.187,4.744,12.462,7.768,12.9v-12.9h.809v12.893A5.023,5.023,0,0,0,108,122.892v2.755a20.377,20.377,0,0,1-2.428.159h-.809v-.039l-.037,0a20.209,20.209,0,0,1,.037-40.386v-.045h.809a20.2,20.2,0,0,1,18.152,29.141Z" transform="translate(-85.333 -85.333)" fill="#3b86ff"/>
</g>
</g>
</svg>
`,
desc: 'xxx'
},
];
safeHtml是一个指令:
import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(protected dom: DomSanitizer) { }
// 根据不同参数，渲染不同的格式
public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html':
return this.dom.bypassSecurityTrustHtml(value);
case 'style':
return this.dom.bypassSecurityTrustStyle(value);
case 'script':
return this.dom.bypassSecurityTrustScript(value);
case 'url':
return this.dom.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this.dom.bypassSecurityTrustResourceUrl(value);
default:
return value;
}
}
}
DomSanitizer参照这里
