0

嗨，我在我的 Angular 2 应用程序的一个组件中使用 i 框架。

组件.ts

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

@Component({
  selector: 'sample comp',
  templateUrl: './sample-comp.component.html',
  styleUrls: ['./sample-comp.component.css']
})
export class sampleComp implements OnInit {
  //DECLARATION
  webURL:SafeResourceUrl;
  constructor() { 

  }

  ngOnInit() {
  }
public onSelectid(){
  console.log('Router selected');

}
}
let greeter = new CampaignOrderComponent();
module FooModule {  
    export var FooInstance = new CampaignOrderComponent();
}

组件.html

<iframe src="http://sampleurl" width="100%" height="600" style="margin-top:-10px" frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

在 i 框架上触发点击事件时，我需要路由到另一个组件。（我已经在根组件的路由文件中指定了该组件）。

现在在 i 框架应用程序（一个 mvc 应用程序）中，我触发了一个点击功能

parrent.showme()

并在 Angular 2 应用程序的根文件夹中添加了 index.js（与 index.html 链接）

index.js

  function showme()
  {
       alert('function called');
       FooModule.FooInstance.onSelectid();

  }

现在我可以通过点击 i frame 应用程序在 angular 2 应用程序页面上显示警报。

目标是更改 showme() 的功能以更改 angular 2 应用程序的路线。

我该怎么做 ？

我尝试了几种方法来解决它，不幸的是我无法得到任何方法。

4

1 回答 1

1

将 id 添加到您的框架，然后在 iframe 元素上使用 contentWindow.document.body.onclick

   <iframe id="iframe_id" src="https://sampleurl" style="margin-top:-10px" frameborder="1"
        webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>

 constructor(private _router: Router){
  } 
  ngAfterViewInit(){
    document.getElementById("iframe_id").contentWindow.document.body.onclick = 
      () => {
      this._router.navigate(['/yourChildRoute']);
      }


   }
于 2016-10-06T08:57:23.673 回答