web-dev-qa-db-de.com

Angular 4+: RouterLink im <a> -Element funktioniert nicht richtig

Ich habe meine AppRoutingModule in imports von @NgModule der AppModule-Klasse platziert.

AppRoutingModule ist folgendermaßen definiert: 

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

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

Ich habe <router-outlet></router-outlet> in die app.component.html eingefügt.

Seiten werden korrekt basierend auf URLs angezeigt: 

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

Das Problem ist in meiner header.component.ts, wo ich versuche, der Startseite einen RouterLink hinzuzufügen. Ich habe solche Lösungen ausprobiert: 

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

Erstens, als ich routerLink in <img> -Element platziert habe, wurde eine solche Direktive nicht gefunden. Dann macht es in <a> element lässig <a href="/home"> von routerLink und macht das vollständige Laden der Seite! Sollte nicht nur Inhalt von <router-outlet> neu geladen werden?

Vielleicht hat es eine Bedeutung, dass mein Layout so aussieht: 

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

und routerLink ist auf dem Element in der children-Komponente<header-bar> (Logo) platziert und sollte über <router-outlet>im übergeordneten Element navigieren.

Ich habe dieses Verhalten jedoch auch mit routerLink getestet, das direkt in AppComonent platziert hat, und es hat sich nichts geändert! RouterLink lädt die Webseite immer noch neu !: 

<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>
4
Michał Ziobro

Sie benötigen mehr, um Routing zu ermöglichen. So sollte Ihre AppRoutingModule-Datei aussehen

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, ich habe tatsächlich den Fehler gefunden und es war an dem Ort, den ich nie vermuten werde. Es gab auch andere Verhaltensweisen, z. B. nicht funktionierende (Klick-) Ereignisbindungen. Ich gehe also auf Konfigurationen meines Webprojekts zu, das auf diesem Beispiel eines eckigen universellen Spas von github basiert: https://github.com/MarkPieszak/aspnetcore-angular2-universal

  1. Ich habe ein Upgrade von ASP NET Core SPA vorgenommen, das mit dem yeoman-Tool erstellt wurde. 

npm install -g yo generator-aspnetcore-spa

Wechseln Sie dann in ein leeres Verzeichnis, in das Ihr Projekt verschoben werden soll, und führen Sie dann Wie folgt aus:

yo aspnetcore-spa
  1. Dann ist mir aufgefallen, dass es nicht möglich ist, Leaflet Open Street Maps während des serverseitigen Pre-Rendering zu verwenden. 

  2. Also dieses Upgrade von Angular 2+ -> Angular 4+ durchgeführt, und die einzelnen Konfigurationsdateien, Module, Boot-, Webpack-, Tsconfig-Dateien usw. ändern. Ich hatte wirklich einen großen Eindruck von diesem Startprojekt unter github:
    https://github.com/MarkPieszak/aspnetcore-angular2-universal

  3. Am Ende des Tages bemerkte ich, dass ich noch einen alten Code habe, der vermutlich korrekt läuft: 

// 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);
}

Und das richtige in der neuen Version des angle universal Projekts, das ähnlich aussieht, sollte sein:

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

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

PS. Vorher habe ich auch platformUniversalDynamic => platformBrowserDynamic. ersetzt

0
Michał Ziobro