Office 365 应用程序和 Angular 2 路由仅在第一次有效

Question

我正在尝试让 Angular 2 路由与 Office 应用程序一起使用。它只在第一次工作，之后就停止工作。我已经设法让相同的代码与 ASP.Net5 一起工作，但不能与 Office Apps 一起工作。

我正在使用 Visual Studio Enterprise 2015 Update 2 和 Office 2016。我已附上重现该问题的解决方案。

Link 到解决方案文件：https://onedrive.live.com/redir?resid=1D346F6F0769D8C!991&authkey=!AGQlHsr70YHepv4&ithint=file%2crar

重现步骤：

1) 编译并运行解决方案。

2) 点击第1页。

3) 它将导航到第 1 页。

4) 点击第2页没有任何反应。

首先对第 2 页重复上述操作，它将显示第 2 页。不知何故，它在第一次后停止工作。我不知道我做错了什么，因为我无法让这么简单的例子起作用。

提前致谢！

编辑 #1：我添加了以下内容并设法让路由工作，但只能使用 navigateByUrl 方法。

app.component.html现在是：

<nav>
    <a [routerLink]="['PageOne']">Page 1</a>
    <a [routerLink]="['PageTwo']">Page 2</a>
</nav>
<button (click)="pOne()">Page 1</button>
<button (click)="pTwo()">Page 2</button>
<router-outlet></router-outlet>

app.component.ts 现在是：

import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from "angular2/router";
import {PageOneComponent} from "./pageone.component";
import {PageTwoComponent} from "./pagetwo.component";

@Component({
    selector: "my-app",
    templateUrl: "app/app.component.html",
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {
        path: "/pageone",
        name: "PageOne",
        component: PageOneComponent
    },
    {
        path: "/pagetwo",
        name: "PageTwo",
        component: PageTwoComponent
    }
])
export class AppComponent {
    constructor(private _router: Router) { }

    public pOne() {
        //this._router.navigate(["PageOne"]);
        this._router.navigateByUrl("/pageone", true);
    }

    public pTwo() {
        //this._router.navigate(["PageTwo"]);
        this._router.navigateByUrl("/pagetwo", true);
    }
}

如上所述，navigate 方法仅在第一次使用时有效，而 navigateByUrl 方法仅在您设置 _skipLocationChange 为真。

编辑#2： Bootstrap 是：

///<reference path="../../../node_modules/angular2/typings/browser.d.ts"/>
//import {enableProdMode} from 'angular2/core'
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from 'angular2/router';

//enableProdMode();
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Home.html 是：

<!DOCTYPE html>
<html>
<head>
    <base href="../../App/Home/"/>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title></title>

    <script src="../../Scripts/node_modules/es6-shim.js"></script>
    <script src="../../Scripts/node_modules/system-polyfills.js"></script>
    <script src="../../Scripts/node_modules/shims_for_IE.js"></script>

    <script src="../../Scripts/node_modules/angular2-polyfills.js"></script>
    <script src="../../Scripts/node_modules/system.src.js"></script>
    <script src="../../Scripts/node_modules/Rx.js"></script>
    <script src="../../Scripts/node_modules/angular2.dev.js"></script>
    <script src="../../Scripts/node_modules/http.dev.js"></script>
    <script src="../../Scripts/node_modules/router.dev.js"></script>


    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <link href="../../Content/Office.css" rel="stylesheet" type="text/css"/>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- To enable offline debugging using a local reference to Office.js, use: -->
    <!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
    <!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->

    <!--<link href="../App.css" rel="stylesheet" type="text/css"/>
    <script src="../App.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css"/>
    <script src="Home.js" type="text/javascript"></script>-->

    <!-- 2. Configure SystemJS -->
    <script>
        Office.initialize = function(reason) {
            System.config({
                meta: {
                    "./*": { scriptLoad: true }
                },
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/main')
                .then(null, console.error.bind(console));
        }
    </script>
</head>
<body>
    <div id="content-header">
        <div class="padding">
            <h1>Welcome</h1>
        </div>
    </div>
    <div id="content-main">
        <div class="padding">
            <my-app>LOADING.........</my-app>
        </div>
    </div>
</body>
</html>

Answer 1

此问题已在 Angular 2.

的更高版本中修复

Office 365 应用程序和 Angular 2 路由仅在第一次有效

Office 365 app & Angular 2 routing only works the first time

typescript

angular

office365

angular2-routing

office365-apps