3

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

这是我的文件夹结构

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

模板.component.html 

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

模板.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');
  }

}
4

1 回答 1

2

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

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

这很可能会起作用，请尝试让我知道。

于 2018-01-30T11:37:20.550 回答