App wird beim Navigieren zu einer Route neu geladen

Question

Ich arbeite an einer angular2-Anwendung wo bei der Anmeldung Ich möchte zu einer bestimmten Route navigieren. Jetzt habe ich eine Funktion für die Anmeldung definiert und was es einfach tut ist ein Dienst, der die Anmeldeinformationen im Formular überprüft.

ich den Service als auch meine loginComponent bin teilen

LoginFormComponent:

import {Component} from '@angular/core'; 
import {ShareService} from './ShareService' 
import { Router, ActivatedRoute, Params } from '@angular/router'; 

@Component({ 
selector: 'login', 
template: ` 

     <div class="container"> 
     <h1>Login Form</h1> 
     <form> 
      <div class="form-group"> 
      <label for="name">Username</label> 
      <input type="text" class="form-control" id="name" #username required> 
      </div> 
      <div class="form-group"> 
      <label for="alterEgo">Password</label> 
      <input type="text" class="form-control" #password id="alterEgo"> 
      </div> 
      <button type="submit" class="btn btn-success" (click)="submit(username,password)">Login</button> 
     </form> 
     </div> 

` 
}) 
export class LoginFormComponent { 

    admin_name="Admin"; 
    admin_password="Password"; 
    loginadmin:boolean; 

    constructor(private _shareService:ShareService,private router: Router,private route: ActivatedRoute) 
    {} 


    submit(name:HTMLInputElement,pass:HTMLInputElement){ 
     this._shareService.submit(name.value,pass.value); 

     if(this._shareService.getData()) 
     { 
      this.router.navigate(['about']); 
     } 
    } 

} 

ShareService:

import { Injectable } from '@angular/core'; 
import {EventEmitter} from '@angular/core'; 

@Injectable() 


export class ShareService { 

    updateComponent:EventEmitter=new EventEmitter(); 

    loginadmin:boolean; 

    submit(name:string,pass:string):boolean{ 
    if(this.admin_name===name.value && this.admin_password===pass.value){ 
    this.loginadmin=true; 
    this.updateComponent.emit(this.loginadmin); 
    } 
    return false; 
    } 

    getData():boolean{ 
    return this.loginadmin; 
    } 


} 

Die about, die Sie in in this.router.navigate sehen loginFormComponent ist Route conf in app module. Gemeinsame Nutzung der Route Konfiguration als auch:

App Modul:

const routes:Routes=[ 
    { path: 'login', component: LoginFormComponent}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'about', component: AboutComponent }, 
    { path: 'contact', component: ContactComponent }, 
    { path: 'contactus', redirectTo: 'contact' }, 
    { path: '', component:LandingComponent } 
]; 

Und hier ist meine einfache über Komponente:

import {Component} from '@angular/core'; 

@Component({ 
selector: 'about', 
template: `<h1>Welcome about!</h1>` 
}) 
export class AboutComponent { 
} 

Jetzt ist das Problem, wird es authentifiziert aber sobald Ich klicke auf Login, es lädt die Anwendung nur neu an Stelle der Navigation zu about Komponente.

Kann mir jemand sagen, was ich hier falsch mache. Thnaks im Voraus.

Answer 1

Es hört sich so an, als würde Ihr Formular tatsächlich in iteslf gepostet werden, anstatt es angular zu fangen und zu tun, was es braucht. Haben Sie versucht, ein Formular zu senden und dann die Schaltfläche nur einen Absenden-Button zu machen.