angular4导入html文件

Question

我想将test.svg保存在组件变量'a'或svgicon.component.html中。
因此，我创建了svgicon.component.ts文件。 但不起作用。 我该怎么办？

svgicon.component.ts

 import { Component, OnInit } from '@angular/core'; import { svgs } from './svg/test.svg'; @Component({ selector: 'app-svgicon', templateUrl: './svgicon.component.html', styleUrls: ['./svgicon.component.css'] }) export class SvgiconComponent implements OnInit { public a: string = svgs; constructor() { } ngOnInit() { } } 

测试文件

<svg version="1.1" width="10" height="14" viewBox="0 0 10 14"> <path fill="#D4D4D4" d="M5,0.024c-2.761,0-5,2.269-5,5.069c0,1.139,0.37,2.19,0.996,3.036l-0.02,0.039l2.664,3.856l1.349,1.953 l1.339-1.953l2.62-3.82C9.607,7.345,10,6.265,10,5.093C10,2.293,7.761,0.024,5,0.024z M5,7.024c-1.105,0-2-0.895-2-2s0.895-2,2-2 s2,0.895,2,2S6.105,7.024,5,7.024z" /> </svg>

文件夹目录

在此处输入图片说明

Answer 1

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

或（取决于a的内容）

<svg [innerHTML]="a"></svg>

您可能需要应用消毒剂以使Angular确信添加a的内容是安全a 。 有关更多详细信息，请参见RC.1中的某些样式无法使用绑定语法添加

Answer 2

情况1

如果您的组件变量包含svg url a包含路径，例如

export class SvgiconComponent implements OnInit {
  public a: string = 'test.svg';

}

Then use this path inside your image src to render svg image:

<img [src]='a'/>

案例2

如果您的组件varibale a包含SVG模板

  export class SvgiconComponent implements OnInit {
      public a: string = `<svg version="1.1" width="10" height="14" viewBox="0 0 10 14">
      <path fill="#D4D4D4" d="M5,0.024c-2.761,0-5,2.269-5,5.069c0,1.139,0.37,2.19,0.996,3.036l-0.02,0.039l2.664,3.856l1.349,1.953 l1.339-1.953l2.62-3.82C9.607,7.345,10,6.265,10,5.093C10,2.293,7.761,0.024,5,0.024z M5,7.024c-1.105,0-2-0.895-2-2s0.895-2,2-2 s2,0.895,2,2S6.105,7.024,5,7.024z" />
    </svg>`;

      constructor() { }

      ngOnInit() {
      }

    }

In this scenario you need to add this inside your template `(svgicon.component.html)`:

<div [innerHTML]='a'></div>