Angular Router reagiert nicht richtig für die Browser-URL

Mein Problem ist, wenn ich die URL im Browser ändern führt es immer zum Start Route und wenn ich etwas anderes als Pfade, die in den Router vorhanden sind, bekomme ich 404.Angular Router reagiert nicht richtig für die Browser-URL

app-routing.module.ts

const routes: Routes = [ 
    {path: "start", canActivate:[RoutingGuard], component: Start}, 
    {path: "path-1", canActivate:[RoutingGuard], component: One}, 
    {path: "path-2", canActivate:[RoutingGuard], component: Two}, 
    {path: "path-3", canActivate:[RoutingGuard], component: Three}, 
    {path: "path-4", canActivate:[RoutingGuard], component: Four}, 
    {path: "", component: Public}, 
    {path: "**", redirectTo: "", pathMatch:'full'} 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
})

Routing-guard.service.ts:

canActivate() { 
     this._mysvc.isAuthorized().subscribe(data => this.auth = data); 
     if (!this.auth) { 
      this._router.navigate(['/']); 
     } 
     return this.auth; 
    }

Ich habe ein Login und in öffentlicher Komponente habe ich diese Methode, die zu/Start umleitet, wenn der Benutzer angemeldet ist

public.component.ts.

isAuthorized(authorized:boolean):void { 
     if (authorized) { 
      this._router.navigate(['/start']); 
     } 
     } 
    ngOnInit():void { 
    this._mysvc.isAuthorized().subscribe(this.isAuthorized.bind(this), this.isAuthorizedError); 
    }

index.html:

<html lang="en"> 
<head> 
    <base href="/"> 

    <!--<meta charset="UTF-8">--> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

ich benutze Rewrite Config so überspringen ich die # in der uRL

rewrite.config:

RewriteRule /start/? /index.html [NC] 
RewriteRule /path-1/? /index.html [NC] 
RewriteRule /path-2/? /index.html [NC] 
RewriteRule /path-3/? /index.html [NC] 
RewriteRule /path-4/? /index.html [NC]

Quelle

2017-08-08 Hazu

Können Sie uns für die RoutingGuard der Code zeigen? Vielleicht gibt es eine Weiterleitung nach/start /? Wenn Sie im Routing Guard "isAuthorized" aufrufen und Sie eingeloggt sind, werden Sie natürlich immer auf/start/umgeleitet. Drehen Sie es um, so dass Sie nach! Autorisierten – MeMeMax

@MeMeMax Ich fügte den routingGuard Code in der Frage hinzu! – Hazu

Ist dies: "this._mysvc.isAuthorized()" in Ihrer Wache die gleiche Methode wie in Ihrer öffentlichen Komponente? – MeMeMax

Das Problem ist async Anfrage, die Sie als sync Griff:

canActivate(): Observable<boolean> { 
    return this._mysvc.isAuthorized().do((auth: boolean) => { 
    if (!auth) { 
     this._router.navigate(['/']); 
    } 
    }); 
}

Für Sie do Betreiber importieren diese benötigen:

import 'rxjs/add/operator/do'

Oder:

async canActivate(): Promise<boolean> { 
    if (!await this._mysvc.isAuthorized().toPromise()) { 
    this._router.navigate(['/']); 
    } 
    return auth; 
}

für das Sie den Import müssen toPromise Operator

import 'rxjs/add/operator/toPromise';

Quelle

2017-08-08 10:33:40 PierreDuc

Ich bekomme diese Fehlermeldung beim Versuch, "Property" zu erstellen "do" existiert nicht auf Typ "Observable " und in der zweiten Weise wie setze ich den Wert von Auth? – Hazu

Ich habe meine Antwort aktualisiert, wenn Sie den 'angular-cli' verwenden, können Sie diese Importe in Ihre' polyfills.ts' hinzufügen – PierreDuc

Danke, es scheint jetzt gut zu funktionieren! Ich habe mich gefragt, warum sollte ich diese importieren "rxjs/add/operator/do" in pollyfills.ts importieren? Ich habe es in routing-gaurd.service.ts importiert! – Hazu

Angular Router reagiert nicht richtig für die Browser-URL

Antwort

Verwandte Themen