Question

我正在尝试将Angular 2路由与Office App配合使用。它只在第一次工作，然后停止工作。我已经设法获得与ASP.Net5相同的代码，但没有使用Office Apps。

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

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

重现的步骤：

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

2）点击第1页。

3）它将导航到第1页。

4）点击第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);
    }
}

如上所述，导航方法仅在首次使用时， navigateByUrl 方法仅在您将 _skipLocationChange 设置为true时才有效

编辑＃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应用程序＆amp; Angular 2路由仅在第一次

1 个答案: