我在Angular 4中嵌入来自API endpoints 的iframe时遇到问题 .

如果我想在Angular组件中嵌入iframe，它可以正常工作：

<div class="artist-detail" *ngIf="artist">
  <iframe src="https://open.spotify.com/embed?uri=spotify:album:3EwfQtjvyRAXsPWAKO5FDP" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div>

但我正在后端使用无头CMS（Drupal 8），以便客户端可以为每个艺术家添加不同的iframe .

通常我只是使用Angular的 [innerHTML] 来渲染我从后端获得的文本：

<div class="artist-detail-bio" [innerHTML]="artist.bio"></div>

但是当我用iframe尝试它时，DOM将其作为字符串读取 . 例如，这是devtools中显示的内容：

enter image description here

我尝试使用innerHTML来删除字符串的第一个和最后一个字符，认为它删除了引号，但是没有 .

javascript angular iframe drupal