如何在 Angular 4 中的 iframe 上设置 localhost 路径答案

【问题标题】：how to set localhost path on iframe in angular 4如何在 Angular 4 中的 iframe 上设置 localhost 路径
【发布时间】：2018-01-09 13:59:54
【问题描述】：

您好，请帮助解决代码。如果我嵌入存储在我的项目目录中的静态 HTML 文件，当我在 iframe 中嵌入实时 URL 时 iframe 无法正常工作，则 iframe 工作正常

这里是我的文件夹结构

src
|-app
|  |-components
|      |-template
|            |-template.component.html
|            |-template.component.ts
|-assets
|-templates
     |-template1
          |-index.html

template.component.html

<iframe [src]="getIframe()" frameborder="0" ></iframe>

template.component.ts

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

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css']
})

export class TemplateComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }

  ngOnInit() {
  }

  getIframe(){
    console.log('iframe');
    return this.sanitizer.bypassSecurityTrustResourceUrl('../../../templates/template1/index.html');
  }

}

【问题讨论】：

您是否仔细检查了该位置？也许尝试将临时文件放入同一个文件夹？
将模板文件夹添加到 .angular 文件？不使用 .../.. 从根目录访问文件夹；推荐使用资产文件夹
是的，我将 html 文件放在 assets 文件夹中，但它不起作用
是的，我多次检查了位置
Angular 2/4: Add compiled component to an iframe的可能重复

标签： angular iframe angular4-forms angular4-router angular4-httpclient

【解决方案1】：

在根目录中创建一个文件，将别名保存到文件路径映射，然后通过传递别名从该文件调用函数，别名将为您提供所需文件的路径。示例：

    'use strict';
define([    
], function(){

    var baseUrl = '/dashboard/app'; // the url starting with this file

    var html = {
        'file1'     : 'file_1.html',
        'file2'     : 'app2/file_2.html'
    };

    function getHtml(alias) {
        if(html[alias]) {
            return baseUrl + html[alias];
        }
    };

    return {
        getHtml : getHtml
    }; });

现在需要此文件并使用所需的文件路径调用 getHtml 函数，这将为您提供来自主目录的准确文件路径。

这应该很可能有效，请尝试让我知道。

【讨论】：