kann nicht in angular2

Question

mit router.nagivate navigieren ich "angular2": "2.0.0-beta.15" (mit "typescript": "^1.8.10",) bin mit und AppComponent ist meine Hauptkomponente, die als Schale gerade arbeiten und Griffe Navigation:

import {Component} from 'angular2/core'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
import {LoginComponent} from "./login/login.component"; 
import {RegisterComponent} from "./registration/register.component"; 

@Component({ 
    selector: 'my-app', 
    template: '<router-outlet></router-outlet>', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

@RouteConfig([ 
    { 
     path: '/login', 
     name: 'Login', 
     component: LoginComponent, 
     useAsDefault: true 
    }, 
    { 
     path: '/register', 
     name: 'Register', 
     component: RegisterComponent 
    } 
]) 
export class AppComponent { 

} 

Sowohl LoginComponent und RegisterComponent Links haben zu navigieren Sie zueinander.

Dies ist, wie ich versuche, zu navigieren:

@Component({ 
    ... 
}) 
export class LoginComponent implements OnInit{ 

    constructor(private _router: Router) { 

    } 

    ngOnInit() { 
     // some stuffs 
    } 

    goToRegister(){ 
     this._router.navigate(['Register']); //also tried this._router.navigate(['/Register']); 
    } 
} 

Und ähnlich:

@Component({ 
    ... 
}) 
export class RegisterComponent implements OnInit{ 

    constructor(private _router: Router) { 

    } 

    ngOnInit() { 
     // some stuffs 
    } 

    goToLogin(){ 
     this._router.navigate(['Login']); // also tried this._router.navigate(['/Login']); 
    } 
} 

Aber wenn ich die URL Änderungen für einen Moment zu navigieren bin versucht, und dann App Reloads sich auf die gleiche Seite/Komponente. In der Konsole wird kein Fehler angezeigt.

Answer 1

Ich fand auch das gleiche Verhalten, das Sie hier in einem Projekt sehen, an dem ich auch arbeite. In meinem Fall sah ich dieses Verhalten in Chrome und Safari, aber Firefox schien davon nicht betroffen zu sein.

ich unsicher über die Ursache, sondern die Art, wie ich die Auslösung der router.navigate war

<button class="btn btn-default" (click)="lookupName()">Lookup</button>

Dies zu ändern ist zu

<a class="btn btn-default" (click)="lookupName()">Lookup</a>

das Problem behoben für mich. Vielleicht nicht die Antwort, die du suchst, aber das hat mich verrückt gemacht, und bin glücklich, dass dies für mich behoben wurde.

Blick in das ein bisschen mehr das Element zu einem <a></a> zu ändern ist weniger als ideal, da es die nette Form submit on enter-Funktionalität entfernt. Ich habe es geschafft, es zu reparieren, während ich die gleiche Funktionalität wie vorher behalte und hoffe, dass es dir hilft.

Ich änderte meine Vorlage aus:

<form class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" [(ngModel)]="name" placeholder="Name" required> 
     <button type="submit" class="btn btn-default" (click)="lookup()">Lookup</button> 
    </div> 
</form> 

wie folgt aussehen:

<form class="form-inline" (ngSubmit)="lookup()"> 
    <div class="form-group"> 
     <input type="text" class="form-control" [(ngModel)]="name" placeholder="Name" required> 
     <button type="submit" class="btn btn-default">Lookup</button> 
    </div> 
</form> 

Das ist für mich das Problem zu beheben scheint. Ich habe die Idee nach dem Blick auf diese: https://angular.io/docs/ts/latest/guide/forms.html

Answer 2

Verwenden statt

this._router.navigate(['/Register']) 
this._router.navigate(['/Login']) 

wenn Sie Route von einer untergeordneten Komponente.