iframes中托管的Angular 2路由应用程序_Angular_Outlook Addin_Angular2 Routing

iframes中托管的Angular 2路由应用程序

angular

iframes中托管的Angular 2路由应用程序,angular,outlook-addin,angular2-routing,Angular,Outlook Addin,Angular2 Routing,我目前正在使用Angular 2构建Outlook加载项。因为它是一个outlook托管的应用程序，它将在跨域iframe中运行，对此我没有什么可以更改的。iframe还使用以下属性沙盒允许脚本允许表单允许同一来源ms允许弹出窗口允许弹出窗口我试图使用Angular 2的路由器，但每当我使用导航方法时，我都会收到一系列异常，说明这一点。\u history.pushState不是一个函数。我尝试了默认位置策略和散列位置策略，但都出现了这个异常。我认为HashLocationStrategy的

我目前正在使用Angular 2构建Outlook加载项。因为它是一个outlook托管的应用程序，它将在跨域iframe中运行，对此我没有什么可以更改的。iframe还使用以下属性沙盒

允许脚本允许表单允许同一来源ms允许弹出窗口允许弹出窗口

我试图使用Angular 2的路由器，但每当我使用

导航

方法时，我都会收到一系列异常，说明

这一点。\u history.pushState不是一个函数

。我尝试了默认位置策略和散列位置策略，但都出现了这个异常。我认为

HashLocationStrategy

的目的是支持不完全支持HTML5的旧浏览器。使用HTML5

history

方法（如pushState）似乎无法达到目的，但我对

LocationStrategy

和

HashLocationStrategy

之间差异的理解可能是错误的

我的问题是，有没有办法告诉路由器不要使用

history.pushState

或其他任何可以执行的操作，以便我可以在此iframe中使用路由器。因为我得到了这些异常，它停止了我的一些应用程序启动代码的执行

编辑：作为旁注，我的应用程序有多个页面，所以它绝对不是一个严格的SPA。我试图将整个UI保持为静态站点，并使用路由器在页面之间导航。我不一定关心保存导航历史，因为它托管在outlook中，所以角度路由器可能不适合我的用例。我也在研究在整个应用程序中使用ASP.NET MVC之类的工具，但在应用程序的每个部分/页面中使用angular来驱动。

您可以实现自己的

定位策略
您可以使用HashLocationStrategy的源代码作为模板。这并不复杂
要使用自定义的LocationStrategy
将其添加到ROUTER\u提供者之后的提供者中

bootstrap(AppComponent, [
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useValue: CustomLocationStrategy})]);

我在尝试使用Angular 2布线时遇到了同样的问题。使用RC1路由器和不推荐使用的路由器。冈特的建议是成功的，我已经在使用HashLocationStrategy了。我在GitHub上找到了这个类的最新源代码，根据它创建了自己的自定义位置策略，并简单地删除了在路由发生时试图更新web浏览器历史记录的行。这阻止了错误的发生，并且此修复程序适用于不推荐使用的路由器及其更新的替代品
我写了一篇简短的博客文章，为感兴趣的人详细介绍了这些步骤：
这不是因为iFrame，而是Office.js将window.history.replaceState（）和window.history.pushState（）设置为null。阻止这种破坏路由器的最简单方法是将它们设置为空函数，如下面的代码段所示，然后您可以安全地使用HashLocationStrategy
    <!DOCTYPE html>
<html>

<head>
    <title>office add-in</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    <script>
        window.history.replaceState = function(){};
        window.history.pushState = function(){};
    </script>
    ...
</head>

<body>
    <addin></addin>
</body>

</html>


办公室加载项
...
window.history.replaceState=函数（）{}；
window.history.pushState=函数（）{}；
...
它有工作路线。
如果您能直接在答案中发布代码的重要部分，那就太好了。