Je suis l'application quickstart simple des docs Angular2 et j'utilise un backend de ressort pour l'exécuter. Mon problème est que le routeur angulaire a abandonné le hashtag de l'URL alors ce qui aurait dû être example.com/#/dashboard est maintenant example.com/dashboard. J'utilise la méthode LocationStrategy spécifiée dans un tas de messages sur StackOverflow. Voici mon exemple simple:Routage Angular2 - ajouter le hashtag en utilisant LocationStrategy ne fonctionne pas?
File: main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core';
import {LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {TestComponent} from './simple/test.component'
bootstrap(
TestComponent,
[
provide(LocationStrategy, { useClass: HashLocationStrategy })
]
);
File: test.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector: 'test1',
template: "<h1>This is test1 component</h1>"
})
export class Test1 { };
@Component({
selector: 'test2',
template: "<h1>This is test2 component</h1>"
})
export class Test2 { };
@Component({
selector: 'my-app',
template: `
<h1>This is my test app</h1>
<nav>
<a [routerLink]="['Test1']">Test1</a>
<a [routerLink]="['Test2']">Test2</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/test1',
name: 'Test1',
component: Test1
},
{
path: '/test2',
name: 'Test2',
component: Test2
}
])
export class TestComponent { }
File: index.html
<html>
<head>
<base href="/">
<title>This is an Angular 2 test</title>
<!-- Angular dependencies -->
<script src="/node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>
<!-- App -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}/*,
'node_modules': {
format: 'cjs',
defaultExtension: 'js'
}*/
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app></my-app>
</body>
</html>
J'utilise Angular2 2.0.0-beta.9 et c'est le comportement que je vois. Notez qu'aucun des 2 chemins dans @RouteConfig n'est marqué avec useAsDefault: true. Lorsque j'essaie d'ouvrir http://localhost:8080/#/test1, la page s'ouvre correctement, mais lorsque je clique sur l'une des deux ancres du modèle TestComponent, le hashtag est supprimé.
Ensuite, si je mets path1 à useAsDefault: true, le hashtag est immédiatement supprimé même lorsque j'essaie de visiter http://localhost:8080/#/test1.
Quelqu'un peut-il me dire si je fais quelque chose de mal ou si c'est un bug? Je veux juste récupérer le hashtag dans l'URL.
Qu'est-ce que votre look de configuration de la route comme? Comment naviguez-vous vers cet itinéraire? –
P.S. J'ai essayé d'ajouter manuellement le hashtag mais cela a cassé l'application entière donc je devinais que je ne suis pas censé y toucher :) – RVP
Cela fonctionne très bien avec la même implémentation en beta-9. Avez-vous fait quelque chose de plus ordinaire dans votre application? Si oui, faites le nous savoir. – micronyks