web-dev-qa-db-fra.com

Angular 4+: RouterLink dans <a> élément ne fonctionne pas correctement

J'ai placé ma AppRoutingModule dans imports de @NgModule de AppModule classe.

AppRoutingModule est défini de la manière suivante: 

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

J'ai placé <router-outlet></router-outlet> dans app.component.html.

Les pages s'affichent correctement en fonction des URL: 

localhost:5000/  
localhost:5000/home  
localhost:5000/lesson-offers

Le problème est dans mon header.component.ts où je tente d’ajouter routerLink à la page d’accueil. J'ai essayé de telles solutions: 

<img routerLink="home" ... />
<img [routerLink]="/home" ... />
<a routerLink="home"> <img ... /></a>
<a [routerLink]="home" ... ><img ... /></a>

Premièrement, lorsque j'ai placé routerLink dans l'élément <img>, cette directive n'a pas été trouvée. Ensuite, dans l'élément <a>, il crée un <a href="/home"> occasionnel à partir de routerLink et effectue le rechargement de la page complète! Ne devrait-il pas recharger uniquement le contenu de <router-outlet>?

Peut-être que ça veut dire que ma mise en page ressemble à ceci: 

// AppComponent HTML
<header-bar></header-bar>
<router-outlet></router-outlet>

et routerLink est placé sur l'élément dans le composant enfants <header-bar> (logo) et doit naviguer sur <router-outlet> dans son parent ?

Mais j'ai aussi testé ce comportement en utilisant routerLink s placé directement dans AppComonent et rien n'a changé! RouterLink recharge toujours la page Web !: 

<header-bar></header-bar>
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a>
<a routerLink="page-not-found">Not Exsists</a>
<router-outlet></router-outlet>
angularrouterlink
4
Michał Ziobro

Vous avez besoin de plus pour que le routage fonctionne. Voici à quoi devrait ressembler votre fichier AppRoutingModule

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent, LessonOffersComponent } from somewhere;

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

@NgModule({
  imports: [ RouterModule.forRoot(APP_ROUTES) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}
2
Almost Handsome

Ok, j’ai trouvé l’erreur et c’est à la place que je n’aurai jamais supposé. Il y avait aussi d'autres comportements différents, comme le fait de ne pas travailler (cliquer) sur les liaisons d'événement. Je passe donc en revue les configurations de mon projet Web qui sont basées sur cet exemple angular 4 universal spa de github: https://github.com/MarkPieszak/aspnetcore-angular2-universal

  1. J'ai mis à niveau à partir de ASP NET Core SPA généré avec l'outil yeoman. 

npm install -g yo generator-aspnetcore-spa

Ensuite, allez dans un répertoire vide dans lequel vous voulez que votre projet aille et exécutez , Puis exécutez Yeoman comme suit:

yo aspnetcore-spa

  1. Ensuite, j'ai remarqué qu'il n'était pas possible d'utiliser facilement Leaflet Open Street Maps avec le pré-rendu côté serveur. 

  2. Cette mise à jour a donc été effectuée à partir de Angular 2+ -> Angular 4+, en modifiant chaque fichier de configuration de fichiers, module, démarrage, Webpack, tsconfig, etc. J'étais vraiment sous grande impression de ce projet de démarrage sous github:
    https://github.com/MarkPieszak/aspnetcore-angular2-universal

  3. À la fin de la journée, j'ai remarqué qu'il me restait un vieux code qui, je suppose, fonctionnera correctement: 

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

Et le correct dans la nouvelle version du projet universel angulaire qui se ressemble devrait être:

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS Auparavant, je remplaçais également platformUniversalDynamic => platformBrowserDynamic.

0
Michał Ziobro