angular7中使用iframe来加载外部页面

在angular7中使用echarts的线性地图的时候，发现出来缩成了一团，暂未找到解决方案。但是在普通的html中直接引入并使用是没有问题的。因此，转换了思路，使用iframe来加载外部的html，因为在外部html中是正常的。

将正常的html页面放到angular项目的assets下面，然后在angular组件中通过iframe动态引入。这样就可以正常显示了。数据请求可以单独放到页面中。

静态html页面及目录

html内容：和echarts官网案例一样

	
		
		
		
		
	
	df
		


        
        

        
	

angular组件home.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

    url = 'http://localhost:4200/assets/html/index.html';
    // url = 'http://192.168.1.112:8888/assets/html/index.html';
    videoUrl: SafeResourceUrl;

    constructor(private sanitizer: DomSanitizer) {
        this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
    }

    ngOnInit() {
        console.log(this.videoUrl);
    }

}

angular组件home.component.html

效果