组件属性未在 innerHTML html 中呈现

Posted 2023-03-28

【中文标题】组件属性未在 innerHTML html 中呈现

【英文标题】：Component property not rendering in the innerHTML html

【发布时间】：2022-01-20 06:39:37

【问题描述】：

我在 innerhtml 的帮助下将一个 svg 文件渲染到我的组件中。 我的 svg 文件有一些在我的组件中定义和设置的属性，如宽度、高度等。 Svg 文件中的内容通过 innerHTML 渲染到组件中，但不渲染属性值。

@Component(
    selector: 'my-svg',
    template: '<div [innerHTML]="svgContents"></div>'
)
    export class MySvgComponent implements onInit 

    @Input() text="testing model";
    public svgContents:any;

    constructor(private readonly httpClient: HttpClient) 

    ngOnInit(): void 
          this.httpClient.get(path).subscribe((res) => 
                  
            this.svgContents = this.sanitizer.bypassSecurityTrustHtml(res as string);
          ); //getting html string

               
    

在 Svg 文件中

有

<span>
text
<svg>*icon content*</svg>
</span>

结果是：

属性文本未呈现

Edit1：文本属性只是一个示例。我在组件中使用多个属性来设置 svg 中的宽度高度，这些属性也没有被渲染。

【参考方案1】：

将 text 从 svg 移动到模板：

@Component(
    selector: 'my-svg',
    template: '<div>
                 <span>
                   text
                   <div [innerHTML]="svgContents"></div>
                 </span>
               </div>'
)

这是因为 Angular 无法解释来自外部文件的属性。

【讨论】：

我实际上是在尝试使用这些变量在 svg 中设置属性。有可能吗？

当然！您可以使用 SVG 文件作为模板：angular.io/guide/svg-in-templates :)