单击事件angular时更新HTML

Question

我想在点击事件时更新html。使用jquery可以很容易地使用html()方法。但对于angular，我有点困惑。

.ts文件

updateVideoId(videoId: string) {
let html;
html = `<span class="wistia_embed wistia_async_${videoId} popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>`; 
}

<mat-button (click)="updateHtml('asdfasd65f4823asdf')"></mat-button>
<div class="embed-responsive embed-responsive-16by9">
<span class="wistia_embed wistia_async_8zc2rphave popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>
</div>

我只是想更新html点击事件。

Answer 1

在您的情况下，我将使用[ngClass]，因为您唯一更改的是span元素的一个类的名称。因此，修改整个html元素可能没有用。

ts文件

className: string = 'wistia_async_8zc2rphave';
updateHtml(videoId : string){
this.className='wistia_async_'+videoId
}

html文件

<mat-button (click)="updateHtml('asdfasd65f4823asdf')"></mat-button>
<div class="embed-responsive embed-responsive-16by9">
<span class="wistia_embed" [ngClass]="className" popover=false popoverAnimateThumbnail=true" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>
</div>

我创建了一个小stackblitz来向您展示这个解决方案的示例。

Answer 2

如果你想把整个html放入有角度的页面：

<div class="embed-responsive embed-responsive-16by9" [innerHTML]="yourHtmlVariable"></div>

yourHtmlVariable-您可以通过单击控制器来更改它。如果你只需要改变你的课程：

<span [class]="yourClassName" style="display:inline-block;height:700px;position:relative;width:80%">nbsp;</span>

或在有条件的情况下使用[ngClass]https://angular.io/api/common/NgClass