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

Posted 2023-02-23

【中文标题】应用程序在导航到路线时重新加载

【英文标题】：App getting reloaded on navigating to a route

【发布时间】：2017-07-12 19:34:12

【问题描述】：

我正在开发一个 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 组件。

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

【参考方案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>

【讨论】：

我只是想在您的解决方案中添加一些东西，我花了一段时间才弄清楚。在提交方法中，您需要返回 false 以不传播事件。尝试导航到提交按钮上的其他路线时，我遇到了页面重新加载问题

嗯，我在链接或其他按钮上遇到过这个问题，但我的表单和提交按钮似乎没问题。