Question

嗨，请帮忙解决问题。如果我嵌入存储在我的项目目录中的静态HTML文件iframe不能正常工作当我在iframe中嵌入实时URL时，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函数，这样可以从主目录中获得准确的文件路径。

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

如何在角度4中设置iframe上的localhost路径

1 个答案: