J'essaie de faire fonctionner le routage Angular 2 avec Office App. Cela ne marche que la première fois et après ça, ça cesse de fonctionner. J'ai réussi à obtenir le même code pour travailler avec ASP.Net5 mais pas avec Office Apps. J'utilise Visual Studio Enterprise 2015 Update 2 et Office 2016. J'ai joint la solution pour reproduire le problème.L'application Office 365 et le routage Angular 2 ne fonctionnent que la première fois
Lien vers les fichiers de solution: https://onedrive.live.com/redir?resid=1D346F6F0769D8C!991&authkey=!AGQlHsr70YHepv4&ithint=file%2crar
Étapes pour reproduire:
1) compiler et exécuter la solution.
2) Cliquez sur la page 1.
3) Il naviguera à la page 1.
4) Cliquez sur la page 2 et rien ne se passe.
Répétez l'opération ci-dessus en commençant par Page 2 et la page 2 apparaîtra. D'une certaine manière, elle cesse de fonctionner après la première fois. Je n'arrive pas à comprendre ce que je fais de manière incorrecte car je ne peux pas obtenir un exemple aussi simple à travailler.
Merci d'avance!
Edit # 1: J'ajouté ce qui suit et a réussi à obtenir le routage à travailler mais seulement en utilisant la méthode navigateByUrl.
Le app.component.html est maintenant:
<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>
Et les app.component.ts est maintenant:
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);
}
}
Comme mentionné ci-dessus, la méthode naviguer ne fonctionnera que la La première fois et la méthode navigateByUrl ne fonctionnera que si vous définissez _skipLocationChange sur true.
Edit # 2: Bootstrap est:
///<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 est:
<!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>
Comment votre 'bootstrap (...) 'ressembler? –
J'ai ajouté le code bootstrap ci-dessus. –
'HashLocationStrategy' est-il une option? Je ne connais pas les contraintes des applications Office 365. Que cela fonctionne avec '_skipLocationChange' est un indice que' pushState' pourrait ne pas être supporté. Cela signifierait que vous devez utiliser une implémentation 'LocationStrategy' personnalisée qui n'utilise pas' pushstate' (que 'HashLocationStrategy' utilise également.) Le code n'est pas compliqué https://github.com/angular/angular/blob/master /modules/angular2/src/platform/browser/location/hash_location_strategy.ts Vous aurez besoin de créer une implémentation altrative qui utilise par exemple un tableau au lieu de 'pushState' –