我找到了解决方案
tiktok.component.html
<div [innerHTML]="tiktokDetailVideo"></div>
titkok.component.ts
import { Component, OnInit, Input, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { NgxSpinnerService } from 'ngx-spinner';
export class TiktokVideoComponent implements OnInit, OnChanges {
@ViewChild('videoDetail') private videoDetail: ElementRef;
tiktokDetailVideo: any;
isClickVideo = false;
itemVideo;
listPostVideo = [];
constructor(
private spinner: NgxSpinnerService,
private sanitizer: DomSanitizer,
) {}
ngOnInit() {}
ngOnChanges(changes: SimpleChanges) {}
detailPostVideo(post) {
this.isClickVideo = true;
this.itemVideo = post;
this.tiktokDetailVideo = this.renderVideoTiktok(post);
this.loadScript('https://www.tiktok.com/embed.js').then(status => {
if (status === 'loaded') {
this.show = true;
}
});
if (this.type === 'tiktok') {
this.spinner.show();
}
setTimeout(() => {
const element = document.getElementById(post.id + '-video-post');
if (element) {
this.listVideoPost.nativeElement.scrollTop = element.offsetTop - 200;
} else {
this.listVideoPost.nativeElement.scrollTop = -30;
}
if (this.videoDetail) {
this.videoDetail.nativeElement.scrollTop = -30;
}
}, 700);
setTimeout(() => {
this.spinner.hide();
}, 3000);
}
renderVideoTiktok(post) {
const html = '<blockquote class="tiktok-embed" cite="' + post.link + '" '
+ 'data-video-id="' + post.videoId + '" style="max-width: 605px;min-width: 325px; margin: 0 auto;" > <section> '
+ '<a target="_blank" title="' + post.socialName + '" href="' + post.socialLink + '">'
+ '@' + post.socialName + '</a> '
+ '</section> '
+ '</blockquote>';
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}