应用程序在导航到路线时重新加载

Question

我正在开发一个 angular2 应用程序，登录时我想导航到特定路线。现在，我为登录定义了一个函数，它所做的只是调用一个服务来检查表单中传递的凭据。

我正在共享服务以及我的登录组件：

登录表单组件：

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']);
        }
   }

 }

共享服务：

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


 }

loginFormComponent中的this.router.navigate中看到的about是app module中配置的路由。也分享路由配置：

应用模块：

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 } 
 ];

这是我的简单关于组件：

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

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

现在的问题是它已通过身份验证，但只要我点击登录，它就会重新加载应用程序而不是导航到 about 组件。

谁能告诉我我在这里做错了什么。提前问好。

Answer 1

听起来您的表单实际上是像常规表单一样发布到iteslf，而不是有角度地捕捉它并做它需要做的事情。您是否尝试过提交表单，然后将按钮设置为提交按钮。

<div class="container">
    <h1>Login Form</h1>
    <form (ngSubmit)="submit(username,password)">
        <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">Login</button>
    </form>
</div>