Question

实际上我正试图从Login_Component导航到Homepage_Component。我使用Spring Micro服务作为凭证验证的后端。它正在验证凭据，因此它应该移动到Homepage_Component但它仍在重新加载login_Component。当我在浏览器URL中检查时，显示了Homepage_Component的路径（/ coreapp），但它没有加载Homepage_Component。这是我的代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import {MatCardModule} from '@angular/material/card';
import { FormsModule }   from '@angular/forms';
import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';
import { HomepageComponent } from './homepage/homepage.component';
import { RouterModule,Routes } from '@angular/router';
import { AppRoutingModule } from './/app-routing.module';

const appRoutes: Routes = [
      { path: 'coreapp', component: HomepageComponent }
];
@NgModule({
declarations: [
  AppComponent,
  LoginComponent,
  HomepageComponent
],
imports: [
 RouterModule.forRoot(
    appRoutes  ,{ enableTracing: true }
),
 BrowserModule,
 HttpModule,
 FormsModule,
 MatCardModule,
 AppRoutingModule
],
providers: [
        ],
bootstrap: [AppComponent]
})
export class AppModule { }

这是login.component.ts：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {MatCardModule} from '@angular/material/card';
import { Router } from '@angular/router';
@Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],

})
export class LoginComponent implements OnInit {

constructor(private userservice : UserService,private router:Router) { }
    username2:string;
    token: string;
    title:string ="Activity Stream";
    public submitFunction(u:string,p:string): void {
        this.username2=u;
        alert("l");
        this.userservice.authenticate(u,p).subscribe(
        data => {
            if(data.status === 200) {
                localStorage.setItem('token',data.json().token);
                localStorage.setItem('username',u);
                this.token=data.json().token;
                this.router.navigate(['/coreapp']);
                location.reload();      
            }
        })
    }

    ngOnInit() {
    }
}

Answer 1

我相信您的问题是最后一行location.reload。因此，您指示路由器导航到新URL，但在您重新加载同一页面后立即导航。

如果删除该行，则应解决问题。

使用角度js中的路由器从一个组件导航到另一个组件

1 个答案: