我正在尝试节省空间编码，并且我有8张图片是从html标记派生的
（即：<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 224 224" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,224v-224h224v224z" fill="none"></path><g id="Layer_1"><g><g fill="#ff5576"><g><g><path d="M145.425,109.375l34.3,-17.15c-9.275,-40.25 -46.55,-70 -90.3,-67.55c-43.75,2.45 -79.275,37.625 -82.25,81.2c-1.4,21.35 4.725,41.125 16.1,57.05c3.85,5.425 10.15,8.575 16.975,8.575h85.75v-30.8c0,-13.3 7.525,-25.375 19.425,-31.325z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="13" cy="48" transform="scale(1.75,1.75)" r="3"></circle></g></g></g><g fill="#ff5576"><g><g><path d="M121.45,123.2c-0.875,0 -1.75,-0.175 -2.625,-0.7c-2.45,-1.4 -3.325,-4.725 -1.925,-7.175c4.9,-8.575 12.25,-15.575 21.35,-20.125l36.05,-17.675c2.625,-1.225 5.775,-0.175 7,2.45c1.225,2.625 0.175,5.775 -2.45,7l-35.875,17.675c-7.175,3.5 -12.95,9.1 -16.8,15.925c-1.05,1.575 -2.8,2.625 -4.725,2.625z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="54" cy="98" transform="scale(1.75,1.75)" r="18"></circle></g></g></g><g fill="#ffffff"><g><g><path d="M32.9,71.05c-1.05,0 -2.275,-0.35 -3.15,-1.05c-2.275,-1.75 -2.8,-5.075 -1.05,-7.35c14.525,-19.425 36.925,-31.5 61.075,-32.725c2.8,-0.175 5.425,2.1 5.6,4.9c0.175,2.975 -2.1,5.425 -4.9,5.6c-21.175,1.225 -40.6,11.55 -53.375,28.7c-1.05,1.225 -2.625,1.925 -4.2,1.925z"></path></g></g></g><path d="M149.975,106.925c-1.225,-2.625 -4.375,-3.675 -7,-2.275c-13.65,6.825 -22.225,20.65 -22.225,36.05v5.25c-6.65,-6.825 -15.925,-11.025 -26.25,-11.025c-10.85,0 -21,4.725 -28,12.95c-1.925,2.275 -1.575,5.6 0.525,7.35c1.05,0.875 2.275,1.225 3.325,1.225c1.4,0 2.975,-0.7 4.025,-1.925c5.075,-5.95 12.25,-9.275 19.95,-9.275c14.525,0 26.25,11.725 26.25,26.25c0,2.975 2.275,5.25 5.25,5.25c2.975,0 5.25,-2.275 5.25,-5.25c0,-1.75 0,-30.8 0,-30.8c0,-11.375 6.3,-21.525 16.45,-26.6c2.8,-1.4 3.85,-4.55 2.45,-7.175z" fill="#ff5576"></path><path d="M213.5,144.025c-2.275,-1.575 -5.075,-2.275 -7.7,-2.275v0c-9.275,0 -22.75,0 -34.825,0l-25.55,-26.425c0.7,-0.525 1.575,-0.875 2.275,-1.4l34.3,-17.15c2.1,-1.05 3.325,-3.5 2.8,-5.95c-10.15,-43.925 -50.4,-74.025 -95.725,-71.4c-46.55,2.625 -84,39.725 -87.15,86.1c-1.4,21.875 4.375,42.7 17.15,60.375c4.9,6.65 12.6,10.675 21,10.85c2.625,0 4.9,-1.75 5.425,-4.375c0.525,-3.325 -1.925,-6.125 -5.25,-6.125c-5.075,0 -9.8,-2.45 -12.6,-6.475c-11.2,-15.575 -16.45,-34.125 -15.225,-53.55c2.8,-41.3 36.05,-74.025 77.35,-76.475c38.675,-2.1 73.325,22.575 83.825,59.5l-30.625,15.225c-10.85,5.425 -18.55,15.225 -21.175,27.125c-0.7,2.8 0.875,5.775 3.675,6.475c2.975,0.7 5.775,-1.05 6.475,-4.025c1.05,-4.375 2.975,-8.575 5.6,-12.075l18.9,19.775c-2.975,0 -5.6,0 -7.7,0c-2.975,0 -5.25,2.275 -5.25,5.25c0,2.975 2.275,5.25 5.25,5.25c4.2,0 10.675,0 17.85,0l13.65,14h-85.575c-2.625,0 -4.9,1.75 -5.425,4.2c-0.7,3.325 1.925,6.3 5.075,6.3h25.725c-2.45,11.9 -13.125,21 -25.725,21c-14.525,0 -26.25,-11.725 -26.25,-26.25c0,-2.975 -2.275,-5.25 -5.25,-5.25c-2.975,0 -5.25,2.275 -5.25,5.25c0,20.3 16.45,36.75 36.75,36.75c18.55,0 33.775,-13.65 36.4,-31.5h24.85l-3.5,13.3c-1.05,4.2 -0.525,8.75 1.925,12.25c2.625,3.675 6.825,5.95 11.375,5.95h37.625c2.45,0 4.55,-1.575 5.075,-4.025l11.2,-45.15c1.575,-5.6 -0.7,-11.55 -5.775,-15.05zM209.125,156.625l-10.325,41.125h-33.425c-1.575,0 -2.45,-0.875 -2.8,-1.4c-0.35,-0.525 -1.05,-1.575 -0.525,-2.975l4.375,-16.625h25.375c0.175,0 0.175,0 0.35,0c0.175,0 0.175,0 0.35,0c1.4,0 2.625,-0.525 3.675,-1.4c2.1,-2.1 2.1,-5.425 0.175,-7.35l-15.05,-15.575c8.925,0 17.85,0 24.675,0v0c1.4,0 2.275,0.875 2.8,1.4c0.175,0.175 0.7,1.225 0.35,2.8z" fill="#444b54"></path></g></g></g></svg>）
我可以使用* ngIf基于我的值，我将这些图像与每个图像相关联，但是此解决方案似乎效率不高。我似乎无法在网上找到其他解决方案。理想情况下，我想将这些html表达式保存在服务的变量中，调用该服务，并将html表达式注入到我的html文件中。
有什么想法吗？
答案 0 :(得分：0)
如果您的目标只是节省组件html文件中的空间，则一种解决方案是使用Angular Material mat-icon component, which supports SVGs。这将允许您通过简单地添加带有适当的mat-icon输入变量（例如svgIcon）的<mat-icon svgIcon="left-arrow">并将特定的SVG注入组件，以及通过简单地更新SVG图标来更改显示的SVG图标。 svgIcon输入变量。
另一种选择是让您为每个SVG创建一个新组件。
例如
import { Component } from '@angular/core';
@Component({
selector: 'app-custom-svg',
template: `
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 224 224" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,224v-224h224v224z" fill="none"></path><g id="Layer_1"><g><g fill="#ff5576"><g><g><path d="M145.425,109.375l34.3,-17.15c-9.275,-40.25 -46.55,-70 -90.3,-67.55c-43.75,2.45 -79.275,37.625 -82.25,81.2c-1.4,21.35 4.725,41.125 16.1,57.05c3.85,5.425 10.15,8.575 16.975,8.575h85.75v-30.8c0,-13.3 7.525,-25.375 19.425,-31.325z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="13" cy="48" transform="scale(1.75,1.75)" r="3"></circle></g></g></g><g fill="#ff5576"><g><g><path d="M121.45,123.2c-0.875,0 -1.75,-0.175 -2.625,-0.7c-2.45,-1.4 -3.325,-4.725 -1.925,-7.175c4.9,-8.575 12.25,-15.575 21.35,-20.125l36.05,-17.675c2.625,-1.225 5.775,-0.175 7,2.45c1.225,2.625 0.175,5.775 -2.45,7l-35.875,17.675c-7.175,3.5 -12.95,9.1 -16.8,15.925c-1.05,1.575 -2.8,2.625 -4.725,2.625z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="54" cy="98" transform="scale(1.75,1.75)" r="18"></circle></g></g></g><g fill="#ffffff"><g><g><path d="M32.9,71.05c-1.05,0 -2.275,-0.35 -3.15,-1.05c-2.275,-1.75 -2.8,-5.075 -1.05,-7.35c14.525,-19.425 36.925,-31.5 61.075,-32.725c2.8,-0.175 5.425,2.1 5.6,4.9c0.175,2.975 -2.1,5.425 -4.9,5.6c-21.175,1.225 -40.6,11.55 -53.375,28.7c-1.05,1.225 -2.625,1.925 -4.2,1.925z"></path></g></g></g><path d="M149.975,106.925c-1.225,-2.625 -4.375,-3.675 -7,-2.275c-13.65,6.825 -22.225,20.65 -22.225,36.05v5.25c-6.65,-6.825 -15.925,-11.025 -26.25,-11.025c-10.85,0 -21,4.725 -28,12.95c-1.925,2.275 -1.575,5.6 0.525,7.35c1.05,0.875 2.275,1.225 3.325,1.225c1.4,0 2.975,-0.7 4.025,-1.925c5.075,-5.95 12.25,-9.275 19.95,-9.275c14.525,0 26.25,11.725 26.25,26.25c0,2.975 2.275,5.25 5.25,5.25c2.975,0 5.25,-2.275 5.25,-5.25c0,-1.75 0,-30.8 0,-30.8c0,-11.375 6.3,-21.525 16.45,-26.6c2.8,-1.4 3.85,-4.55 2.45,-7.175z" fill="#ff5576"></path><path d="M213.5,144.025c-2.275,-1.575 -5.075,-2.275 -7.7,-2.275v0c-9.275,0 -22.75,0 -34.825,0l-25.55,-26.425c0.7,-0.525 1.575,-0.875 2.275,-1.4l34.3,-17.15c2.1,-1.05 3.325,-3.5 2.8,-5.95c-10.15,-43.925 -50.4,-74.025 -95.725,-71.4c-46.55,2.625 -84,39.725 -87.15,86.1c-1.4,21.875 4.375,42.7 17.15,60.375c4.9,6.65 12.6,10.675 21,10.85c2.625,0 4.9,-1.75 5.425,-4.375c0.525,-3.325 -1.925,-6.125 -5.25,-6.125c-5.075,0 -9.8,-2.45 -12.6,-6.475c-11.2,-15.575 -16.45,-34.125 -15.225,-53.55c2.8,-41.3 36.05,-74.025 77.35,-76.475c38.675,-2.1 73.325,22.575 83.825,59.5l-30.625,15.225c-10.85,5.425 -18.55,15.225 -21.175,27.125c-0.7,2.8 0.875,5.775 3.675,6.475c2.975,0.7 5.775,-1.05 6.475,-4.025c1.05,-4.375 2.975,-8.575 5.6,-12.075l18.9,19.775c-2.975,0 -5.6,0 -7.7,0c-2.975,0 -5.25,2.275 -5.25,5.25c0,2.975 2.275,5.25 5.25,5.25c4.2,0 10.675,0 17.85,0l13.65,14h-85.575c-2.625,0 -4.9,1.75 -5.425,4.2c-0.7,3.325 1.925,6.3 5.075,6.3h25.725c-2.45,11.9 -13.125,21 -25.725,21c-14.525,0 -26.25,-11.725 -26.25,-26.25c0,-2.975 -2.275,-5.25 -5.25,-5.25c-2.975,0 -5.25,2.275 -5.25,5.25c0,20.3 16.45,36.75 36.75,36.75c18.55,0 33.775,-13.65 36.4,-31.5h24.85l-3.5,13.3c-1.05,4.2 -0.525,8.75 1.925,12.25c2.625,3.675 6.825,5.95 11.375,5.95h37.625c2.45,0 4.55,-1.575 5.075,-4.025l11.2,-45.15c1.575,-5.6 -0.7,-11.55 -5.775,-15.05zM209.125,156.625l-10.325,41.125h-33.425c-1.575,0 -2.45,-0.875 -2.8,-1.4c-0.35,-0.525 -1.05,-1.575 -0.525,-2.975l4.375,-16.625h25.375c0.175,0 0.175,0 0.35,0c0.175,0 0.175,0 0.35,0c1.4,0 2.625,-0.525 3.675,-1.4c2.1,-2.1 2.1,-5.425 0.175,-7.35l-15.05,-15.575c8.925,0 17.85,0 24.675,0v0c1.4,0 2.275,0.875 2.8,1.4c0.175,0.175 0.7,1.225 0.35,2.8z" fill="#444b54"></path></g></g></g></svg>
`,
})
export class AnSVGComponent {}
然后，您只需调用适当的自定义组件即可使用这些SVG。
例如
<app-custom-svg></app-custom-svg>