angular2--怎么在angular2框架内使用iframe嵌入一个抽奖大转盘（实用）

素颜马尾好姑娘i 2023-06-30 05:28 1阅读 0赞

原文出处：[https://blog.csdn.net/Ariel\_201311/article/details/90516824][https_blog.csdn.net_Ariel_201311_article_details_90516824]

实现效果如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWVsXzIwMTMxMQ_size_16_color_FFFFFF_t_70][]

我想在angular2框架内实现一个抽奖转盘的效果，在源码库里下载到的代码基本都是使用jquery框架和js技术的，和angular2使用的ts不符合，很难改动。那么能不能使用html+js实现这个页面，再把它嵌入到ng2里面呢？答案是可以的。  
1、把实现了的大转盘抽奖页面（如turntable）整个文件夹放到ng2的assets文件夹下，turntable里面的文件不用改动  
turntable资源链接：https://pan.baidu.com/s/1isRy3JakWW-AXaRHyXR5ww  
提取码：vuam  
![在这里插入图片描述][20190524123157424.png]

2、在ng2的ts里：  
import \{ DomSanitizer,SafeResourceUrl \} from "@angular/platform-browser";  
  
export class TurnTable \{  
    iframe:SafeResourceUrl;   //定义变量  
      
    constructor(private sanitizer: DomSanitizer) \{\}    //在构造器里定义引入进来的属性

ngOnInit() \{  
        let src="./assets/turntable/index.html"    //此处链接到你写的大转盘代码处  
        this.iframe=this.sanitizer.bypassSecurityTrustResourceUrl(src)  
    \}  
\}  
  
2、在ng2的html里：  
  
<iframe class="report-iframe" width="100%" height="300" \[src\]="iframe"></iframe>

[https_blog.csdn.net_Ariel_201311_article_details_90516824]: https://blog.csdn.net/Ariel_201311/article/details/90516824
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWVsXzIwMTMxMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019052412271941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWVsXzIwMTMxMQ==,size_16,color_FFFFFF,t_70
[20190524123157424.png]: https://img-blog.csdnimg.cn/20190524123157424.png