2016-10-06 2 views
0

Привет, я использую i-кадр в одном компоненте моего приложения с угловым 2.Нажав на элемент в IFrame (Inline Frame), мне нужно направить на определенный URL-адрес.

Component.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(); 
} 

Component.html

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

Хотя запуская событие щелчка на я кадр, я должен маршрут к другому компоненту. (Который я уже указанный в файле маршрутизации моего корневого компонента).

Прямо сейчас внутри приложения я кадр (а MVC приложение) я вызвавший функцию щелчка

parrent.showme() 

и добавил index.js на корневой папке углового 2 приложения (связанный с index.html)

index.js

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

    } 

теперь я могу показать предупреждение на угловой 2 приложения р возраста через клик внутри приложения i -фрагмента.

Целью является изменение функциональности showme() для изменения маршрута углового 2 приложения.

Как я могу это сделать?

Я пробовал несколько методов для его решения, к сожалению, я не могу получить.

ответ

1

Добавить идентификатор к раме, а затем использовать contentWindow.document.body.onclick на IFrame элемент

<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']); 
     } 


    } 
+0

привет, , что все компоненты должны импортировать перед использованием этого кода? (ожидается ngAfterViewInit) –

+0

ngAfterViewInit вызовет раз DOM инициализируется –

+0

я получаю ошибку 'contentWindow' –

 Смежные вопросы

  • Нет связанных вопросов^_^