在另一个 Angular 2 应用程序中嵌入一个 Angular 2 应用程序答案

【问题标题】：Embed an Angular 2 app inside another Angular 2 app在另一个 Angular 2 应用程序中嵌入一个 Angular 2 应用程序
【发布时间】：2017-03-20 12:23:51
【问题描述】：

我的任务是实现一个基于 Angular 2 的应用程序提供页眉、导航栏和页脚。所有非常标准的东西。但是在导航栏之间，其他的angular 2应用都可以显示，哪个应用程序取决于用户在导航中的选择酒吧。嵌入式 Angular 2 应用程序通过它们自己的 URL 访问。导航栏是使用来自 REST API 允许轻松配置。

听起来这可以使用 IFRAME 来实现，但是有吗使用 IFRAME 的任何替代方法，以及使用浏览器的来回按钮、键盘快捷键等。

我可以动态调整 IFRAME 大小以适应嵌入的大小吗角度应用程序？即使嵌入式应用程序的大小发生变化？

【问题讨论】：

我认为没有其他选择。您可能需要提供自定义的LocationStrategy（基于默认的HashLocationStrategy 或PathLocationStrategy）
感谢 Günter，LocationStrategy 是用于导航的，但是 IFRAME 垂直大小呢？最好根据嵌入的内容调整IFRAME的垂直大小。
您可以将孩子的尺寸传达给父母，让父母设置传递的尺寸。
嗯，这听起来很合理。它可能需要cross document messaging。感谢您指明方向。完成后，我将在此处分享我的发现或提出更多问题。

标签： angular iframe embed

【解决方案1】：

嵌入 angular 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 的大小以适应内容。这可以使用容器应用程序的 de main 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);
}

【讨论】：

IFrameResizer NPM module 会根据其内容自动调整 IFrame 的大小。
的回答完全准确。干得好，但 iframe 很笨拙。一种非 iframe 方式可能是从一个 Angular 应用程序中导出一个模块并将其导入到另一个应用程序中。也许这个答案会帮助任何在这里找到方式的人：stackoverflow.com/questions/46461338/…
感谢您的建议，这听起来很有希望，但情况变得有点复杂。其中一个团队决定更改与 redux 结合使用的 react 框架，因此让他们导出 angular 模块将很困难。