Angular,如何将变量用于iframe源?

时间:2019-06-12 11:15:04

标签: html angular

我想使用来自youtube和其他类似平台的内嵌框架-但我不知道如何使用变量作为源。

我已经在搜索它了,但是我得到的答案却没有解决。

这是iframe:

<div class="right">
    <h2>Associated Pictures/Media Files</h2>
    <p>Here we will display either Infos, Fotos, Videos, Music or even interative content.</p>
    <div style="padding: 2%;">
        <iframe 
        width="100%" 
        height="315" 
        src="https://www.youtube.com/embed/Q7hmXN714RQ" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
        </iframe>
    </div>
</div>

我唯一想要的就是在这里使用此变量:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  source = 'https://www.youtube.com/embed/Q7hmXN714RQ';
}       

但是当我尝试通过各种方式进行操作时,例如:

src="{{source}}"

这根本不起作用:(

有人知道该怎么做吗?我找不到适合该问题的解决方案。

1 个答案:

答案 0 :(得分:2)

到目前为止,您尝试了什么?找到了,也许对您有用:https://stackblitz.com/edit/angular-youtube-video-in-iframe