Angular2 - Wenn die Aktualisierung der Seite, die url bleibt die gleiche, aber die entsprechenden anzeigen nicht geladen
In Angular2, ich bin mit diesem Problem. Wenn Sie die Seite aktualisieren. Die URL bleibt gleich, aber es wird nicht geladen entsprechenden anzeigen in RouterOutlet
.
Alles funktioniert einwandfrei außer erfrischenden Seite Ausgabe.
app.ts
import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
<ul class="nav navbar-nav">
**<li><a [routerLink]="['Home']">One</a><hr/></li>
<li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Angular</a></li>
<li><a href="#">.NET</a></li>
</ul>
</li>
</ul>
</nav>
<router-outlet></router-outlet>`
})
@RouteConfig([
{path:'/Home', name: 'Home', component: HomeCmp}
{path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
])
export class MicropuppyApp {
constructor(){
console.log("Micropuppy app started");
}
}
bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);
Möglich, Duplikat der Angular 2.0 router funktioniert nicht auf Neuladen des Browsers
InformationsquelleAutor nyks | 2016-01-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit der Standard-Strategie (HTML5 Geschichte API) von routing, benötigen Sie eine server-Konfiguration umleiten alle Ihre Pfade zu den HTML-entry-point-Datei. Mit dem hashbang Ansatz ist es nicht notwendig... Wenn Sie möchten, wechseln Sie zu diesem Ansatz, einfach den folgenden code verwenden:
Haben, könnten Sie einen Blick auf diese Fragen zu diesem Thema:
Hoffe es hilft dir,
Thierry
#
symbol, das sieht nicht gut aus für Echtzeit-Anwendung. Ich habe bereits Hinzugefügt<base href="/">
. Bitte guide.Ja, in der Tat, mit dem # - symbol, ist der Preis nicht etwas zu tun, auf der server-Seite 🙁 ich Stimme mit Ihnen überein, dass URLs mit dem hashbang Ansatz nicht so sauber wie mit der
PathLocationStrategy
(Standard). Aber wenn Sie das später, ist es notwendig, die Umleitung Zeug auf der server-Seite. Es hängt von Ihrem server-Plattform. Firebase ermöglicht, dies in ein paar Zeilen code 😉Was ist die aktualisierte version von diesem code?
InformationsquelleAutor Thierry Templier
War auch ich steckte in der gleichen situation, wo auf aktualisieren Angular2 app wurde nicht geladen werden kann.
Der Grund hinter dieser Frage ist Angular2 router nutzt history-API für das routing durch die auf die Aktualisierung der route-App nicht finden index.html und am Ende zeigt 404 oder kann nicht angeforderten URL.
können Sie umgehen, in zwei Arten:
Hashbang-Technik durch die Verwendung HashLocationStrategy aber die URL sieht schlecht durch die Gegenwart des hash.
Hier, wie ich arbeitete es aus:
Ich verwenden Node.js für die Zustellung der Anfrage.
Vorausgesetzt, Sie haben Node und Npm installiert.
Paket.json, die für die Installation benötigten Module.
erstellen server.js in Ihr Projekt-Verzeichnis.
Verwenden Sie den folgenden Befehl zum starten Ihrer app-server.
Nun jede Anfrage wird über die App mit dem server stellen Sie sicher, dass auf jeden refresh/reload index.html bedient die boost-Winkel-App.
InformationsquelleAutor jigar gala
Habe ich es geschafft dieses Problem zu beheben, indem Sie diesen code auf der Oberseite des Kopfes in den
index.html
unter<title>
setzenInformationsquelleAutor Shadowbob
Dies ist nicht die richtige Antwort, aber
Über aktualisieren können Sie umleiten alle Toten fordert zur Homepage von opfern 404-Seite
es ist ein temporärer hack nur replay folgenden auf 404.html Datei
InformationsquelleAutor user6250141
Wenn Sie don' wollen # bedeutet, gehen Sie mit 'PathLocationStrategy'. Es ist etwas ähnlich wie HashLocationStratedy.
Hoffe, dieser link wird Ihnen helfen,Angular2 routing.
Ich dachte, dass Sie etwas verpasst.Befolgen Sie die genannten Schritte in dem link. Es funktioniert gut für mich.
InformationsquelleAutor Bharathi Mohan