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

最新推荐文章于 2022-07-12 16:38:39 发布

chelen_jak

最新推荐文章于 2022-07-12 16:38:39 发布

阅读量352

点赞数

分类专栏：实用 Angular2

原文链接：https://blog.csdn.net/Ariel_201311/article/details/90516824

版权

实用同时被 2 个专栏收录

738 篇文章 4 订阅

订阅专栏

Angular2

139 篇文章 0 订阅

订阅专栏

原文出处：https://blog.csdn.net/Ariel_201311/article/details/90516824

实现效果如下：

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

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>