Я хочу добавить htmlString в тег div.
файл app.component.ts,
public htmlString:string = '';
this.htmlString:string = '<img id="img" src="assets/imgages/image.jpg">
<script>
document.getElementById("img").onclick = function(){
alert('click on image');
};
</script>';
app.component.html
<div></div>
Я использовал приведенный ниже код, но скрипт возвращается в виде простого текста.
<div [innerHTML]="htmlString"></div>
Как это решить?
Вы не можете этого сделать. Angular полностью игнорирует тег <script>. Из docs:
HTML — это язык шаблона Angular. Почти весь синтаксис HTML является допустимым синтаксисом шаблона. Элемент
<script>является заметным исключением; это запрещено, что исключает риск атак путем внедрения скриптов. На практике<script>игнорируется и в консоли браузера появляется предупреждение
Чтобы отобразить содержимое на основе события click, вы можете сделать что-то подобное:
.ts
export class AppComponent {
displayData: boolean;
content: string = 'Something to be displayed on click event';
appendData() {
this.displayData = true;
}
}
.html
<img id="img" src="assets/imgages/image.jpg" (click)="appendData()">
<div *ngIf="displayData">
{{content}}
</div>
Вот stackblitz для того же.
В качестве простого обходного пути вы можете попробовать следующее:
HTML:
<div (click)="showAlert()">
<div [innerHtml]="htmlString"></div>
</div>
ТС:
htmlString: any = '<img id="img" src="assets/imgages/image.jpg">'
showAlert(){
alert('click on image');
}
