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

原文出处: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里:
<!--[src]="iframe"对应的是ts里定义的变量,也就是链接地址-->
<iframe class="report-iframe" width="100%" height="300" [src]="iframe"></iframe>

发布了214 篇原创文章 · 获赞 292 · 访问量 332万+

猜你喜欢

转载自blog.csdn.net/chelen_jak/article/details/103987140
今日推荐