角2アプリを別の角2アプリに埋め込む

Question

私は にヘッダ、ナビゲーションバー、およびフッターを提供する角度2ベースのアプリケーションを実装することが任されています。すべてのかなり標準的なもの。 しかし、ナビゲーションバーの間に、他の角度2のアプリケーションを に表示することができます。このアプリケーションは、ナビゲーション内のユーザー選択に依存します。 バー。 埋め込まれたAngular 2アプリケーションは、独自のURLでアクセスされます。 簡単な設定を可能にするために、 REST APIの結果を使用してナビゲーションバーが動的に構築されます。

これはIFRAMEを使用して実現することができるように聞こえるが、そこIFRAMEのを使用してのいずれかの選択肢を 、そして何がブラウザの 前後にボタンを使用してナビゲーションで発生し、キーボードショートカット、エトセトラされています。

組み込み アングルアプリのサイズに合わせてIFRAMEのサイズを動的に調整できますか？組み込みアプリケーションのサイズが変わっても？

Answer 1

角度2アプリの、または問題のために何か他のもの、のiframeのを使用して達成することができる埋め込み：

import {Component, OnInit, ElementRef, ViewChild} from "@angular/core"; 
import {NavigationService} from "../navigation.service"; 
import {ActivatedRoute} from "@angular/router"; 

@Component({ 
    selector: 'framed-content', 
    template: ` 
    <div class="row content application-box"> 
     <div class="col-xs-12 col-sm-12 col-md-12"> 
     <iframe #iframe style="width: 100%;height: 100vh;position: relative;" 
       [src]="selectedContent | safe" 
       frameborder="0" 
       allowfullscreen></iframe> 
     </div> 
    </div> 
    ` 
}) 
export class FramedContentComponent implements OnInit { 
    @ViewChild('iframe') iframe: ElementRef; 

    private selectedContent = 'content/home.html'; 

    constructor(private route: ActivatedRoute, private navigationService: NavigationService) { 
    } 

    /** 
    * Registers a callback for retrieving the target based on the selected content 
    */ 
    ngOnInit() { 
     this.route.params.map(params => params['selectedItem']).subscribe((selectedItem) => { 
      this.selectedContent = this.navigationService.getNavigationItem(selectedItem).target; 
     }) 
    } 
} 

を残した唯一の問題は、内容に合わせてのIFrameのサイズを変更しています。コンテナアプリケーションのデメインのindex.htmlで普通のJavaScriptの部分を使用して解決される ：たび

<script language="JavaScript1.5"> 
    window.addEventListener('message', function(event) { 

     // IMPORTANT: Check the origin of the data! 
     if (~event.origin.indexOf('http://localhost')) { 
      // The data sent with postMessage is stored in event.data 
      console.log(event.data); 
      resize(event.data); 
     } else { 
      // The data hasn't been sent from your site! 
      return; 
     } 
    }); 

    function resize(frameHeight) { 
     console.log('Parent resize'); 
     frame=document.getElementById('loketFrame'); 
     console.log(frame); 
     frame.height=frameHeight; 
    } 
</script> 

組み込みアプリケーションは、その大きさを変化させ、それがIFRAMEのを更新するために容器にメッセージを投稿する必要があります高さ：

ngOnInit() { 

    setTimeout(() => { 
    var height = document.documentElement.scrollHeight; 
    console.log('Resizing to ' + height); 
    parent.postMessage(height, '*'); 

    }, 0); 
}