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>