首页 > 解决方案 > 重定向失败

问题描述

我尝试使用角度和应用程序路由来实现登录页面,但没有完成重定向,它传递了 url 但 html 代码保持不变。这是应用程序路由模块的解码代码:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChooseCatalogueComponent } from './choose-catalogue/choose- 
catalogue.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: 'choose-catalogue', component: ChooseCatalogueComponent },
    { path: 'login', component: LoginComponent },
    { path: '', component: LoginComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.ts:

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    username: string;
    password: string;

    constructor(private router: Router) { }
        ngOnInit() {
        }

    login() : void {
        if(this.username =='admin' && this.password == 'admin'){

            this.router.navigate(["choose-catalogue"]);
            }
        else {
            this.router.navigate(["/login"]);
        }   
    }
}

当我将登录名和密码输入为“admin/admin”时,页面的 URL 更改为http://localhost:4200/choose-catalogue,但 html 仍然是登录页面的 URL

标签: angularangular-router

解决方案


/只需取出router.navigate

 this.router.navigate(["login"]);

推荐阅读