Angular2 haché urls obtenir url actuelle

Question

J'ai défini mes itinéraires comme suit:

const appRoutes: Routes = [ 
{ 
    path: 'auth', 
    component: AuthenticationComponent, 
}, 
{ 
    path: '', 
    component: HomeComponent, 
    canActivate:[AuthenticationGuard], 
    children:[ 
    { 
    path: 'list', 
    component: TaskListComponent, 
    canActivate:[AuthenticationGuard] 
    }, 
    { 
    path: 'create', 
    component: CreateTaskComponent, 
    canActivate:[AuthenticationGuard] 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent, 
    canActivate:[AuthenticationGuard] 
    }, 
    { 
    path: 'agreement', 
    component: UserAgreementComponent, 
    canActivate:[AuthenticationGuard] 
    }, 
    ] 

}, 

]; 

Et je naviguer sur eux comme suit:

<nav class="mdl-navigation"> 
    <a class="mdl-navigation__link" href="#/list">List</a> 
    <a class="mdl-navigation__link" href="#/create">Create</a> 
    <a class="mdl-navigation__link" href="#/profile">Profile <span *ngIf="profileNotPresent" mdl-badge="Start"></span> </a> 
    <button class="mdl-button mdl-js-button" (click)="logout()"> 
     <i class="material-icons">exit_to_app</i> 
    </button> 
</nav> 

je devais ajouter hash parce que quand je déployé l'application il a commencé à me lancer erreur 404 pour les routes. Avec les URLs hachées cela fonctionne.

Cependant, dans mon code j'avais une condition où je montrais une div à condition était vraie si elle était la ligne de base:

if(this.router.url == '/'){ 
    this.showHomeContent=true; 
} 

que le temps sans hachage mes urls étaient «/», «/profil 'etc et il travaillait corrrrectement. Maintenant, ils sont '#', '#/profile' etc et cette condition ne fonctionne plus, ce qui fait que la div spécifique reste toujours ouverte.

Comment puis-je résoudre ce problème?

Answer 1

Vous devez commencer à utiliser un routeur angulaire pour la navigation. Je veux dire [routerLink] au lieu de href. Sans #, vous obtiendrez peut-être 404 si vous entrez une URL pour essayer d'obtenir une ressource inconnue. Par défaut, Angular utilise PathLocationStrategy, qui effectue une requête serveur dans cette situation. Si vous utilisiez la navigation par routeur, vous pouvez résoudre ce problème en configurant une redirection vers index.html, puis le routeur naviguerait correctement.

donc commencer à utiliser correctement le routeur, et dans votre module d'application ajouter ceci:

providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}] 

Le routeur ajoutera un caractère # aux URL et ne seront pas faire des demandes côté serveur entraînant 404. Mais encore une fois, remplacez vos hrefs par les directives routerLink en premier.

Answer 2

Il est un peu expliqué dans la documentation - PathLocationStrategy

routeur prend en charge deux types de stratégies PathLocationStrategy et HashLocationStrategy

Si vous utilisez PathLocationStrategy vous devez fournir APP_BASE_HREF ou insérer dans votre index.html tête du <base href="/">

Cela devrait résoudre votre problème.