angular - 如何在 Angular 4的iframe上设置本地主机路径

Question

你好请帮助解决代码。 如果我嵌入存储在我的项目目录中的静态 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');
  }

}

Answer 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 函数，这将为您提供主目录中的准确文件路径。

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