現在のプロジェクトで角2のiframeから親の通信へ

Question

私は、ポータルアプリケーション（Angular 2）によってサービスされる複数のAngular 2アプリケーションを持っています。したがって、ポータルアプリケーションには、すべての基礎となるアプリケーションへのリンクを持つヘッダー領域があります。ユーザーが1つのアプリリンクをクリックすると、対応する角度2のアプリがポータル本体のiframeに読み込まれます。

今、私は中央の承認サービスを開発します。ポータルには、現在ログインしているユーザーの権限を保持するサービスがあります。私の質問です：個々のアプリ（iframe）内の親（ポータル）の角2サービス/コンポーネントにアクセスすることは可能ですか？それは角度1の可能性がありましたvia scope

Answer 1

私は現時点で同様のことを行っています（iFrameのサブアプリケーションを使用したポータルアプリケーション） あなたとあなたのサーバーとクライアントの間でwindow.postメッセージがデータを送信します。

ので、サーバアプリの例：で、 だから、親に子フレームのルートを表示

var iframe = document.getElementById('useriframe'); 
    if (iframe == null) return; 
    var iWindow = (<HTMLIFrameElement>iframe).contentWindow; 

    iWindow.postMessage({"for":"user","data":"anything"}, 'http://localhost:4001'); 

及び（インラインフレーム内でホスト）クライアントアプリ

export class AppComponent { 

@HostListener('window:message',['$event']) 
onMessage(e) 
{ 
if (e.origin!="http://localhost:4200") 
    { 
    return false; 
    } 
if (e.data.for=="user") 
    { 
    alert('here i am'); 
    } 
} 

に私の実装では、シェルアプリケーションから子iFrameにトークンとユーザー情報を渡し、子アプリケーションからのルーティング情報をシェルに戻して、urlがthで選択されたルートを反映するようにします子アプリケーション。

[userapp]/edituser /ユーザ名

、と私たちは親アプリケーションに投稿するなどのルートを表示したい：

あなたがルートなどを有していても良い子アプリケーションで 私たちが子供のルートをマークするハッシュタグを使用

http://mywebsite/main/application/user#edituser/bob

注意し、あなたの子供のアプリケーションでは、あなたはすべてのナビゲーションイベントをインターセプトし、

export class MyRoutingComponent implements OnInit { 
constructor(private router: Router) { 
router.events.subscribe((event: Event)=>{ 
    if (event instanceof NavigationEnd){ 
     let url=(<NavigationEnd>event).url; 
     if (url.length>1)//don't post message about base route '/' 
      window.parent.postMessage({"for":"dashboard", "operation":"changeroute","route":url},'*') 
    } 

}) 
} 

経由で新しいルートを掲示して、親アプリケーションにメッセージを解析し、表示された場所のパスを更新するためにそれを使用します。

url = url +'#' + route;    
    this.location.go(url); 

Answer 2

私が助けてくれた@ jazza1000のソリューションを本当に感謝しています。

私たちの問題は、現在の（現在までの）角度cliには、allowJsであっても外部JSファイルの使用を妨げるbugがありました。いくつかのフローチャートを表すためにjsplumb（external js）を使用します。 （Actual issue on stack overflow）

そこで、別の角度4のアプリケーションで外部JSを使用する機能をホストするアプローチを採用することにしました。親Angle 5アプリケーションは、iFrameを使用してAngle 4アプリケーションを表示します。ユーザーがフローチャートを見たいときは、iframeでangle4アプリケーションを開き、終了したら、すべての変更を保存する角度4のアプリケーションでsaveをクリックしてから、メッセージを閉じて隠す親ウィンドウにメッセージを送信しますiframeとのdiv。

角度5における当社の親アプリケーションが保存ボタン上のコード

@HostListener('window:message', ['$event']) 
    onMessage(e) { 
    debugger; 
    if (e.origin != "http://localhost:4201") { 
     return false; 
    } 
    if (e.data.for == "user") { 
     alert('here i am'); 
    } 
    } 

当社のiFrame角度4アプリケーションのコード（私たちは--port 4201でアプリケーションを起動している）

window.parent.window.postMessage({"for":"user","data":"anything"}, 'http://localhost:4200') 

を持っています