组件属性未在 innerHTML html 中呈现

Question

我在 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 中的宽度高度，这些属性也没有被渲染。

Answer 1

将 {{ text }} 从 svg 移动到模板：

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

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