Angular 6 附加 svg onclick 事件

Question

我正在尝试在 noraml Angular 应用程序中加载 svg 对象 html 我正在使用此代码：

 <object data="assets/img/bihar.svg" id="biharsvg" type="image/svg+xml"></object>

它加载正常，但我想使用点击事件加载此对象，因为我已经看到 innerHTML 但它不起作用什么是将其应用到任何 div 中的最佳方式。

我正在使用此代码：

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

在我的 html 和我的 component.ts 中，我正在使用此代码：

 this.htmlContent = `<h2>Hello</h2>`

当我这样做时，这个工作正常：

   this.htmlContent = `<object data="assets/img/bihar.svg" id="biharsvg" type="image/svg+xml"></object>`

我收到警告消息：

WARNING: sanitizing HTML stripped some content

而且我的 svg 对象没有加载将我的对象附加到 html 中的最佳方法。

Answer 1

<div *ngIf="loadsvg">
     <object data="assets/img/bihar.svg" id="biharsvg" type="image/svg+xml"></object>
</div>

在 .ts 文件中

public loadsvg = false;

onlcikLoadSvg(){
this.loadsvg =true;
}

Angular 6 append svg onclick event