Question

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

我正在共享服务以及我的loginComponent：

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


 }

about this.router.navigate loginFormComponent 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 { }中配置的路由。共享路线配置：

app模块：

about

这是我的简单关于组件：

corrplot

现在的问题是它经过身份验证，但是一旦我点击登录它就会重新加载应用程序而不是导航到library(corrplot) M <- cor(mtcars) corrplot(M, method="color", order="FPC")组件。

有人可以告诉我这里我做错了什么。事先提前了。

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>

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

1 个答案: