Angular 5中如何共享类数据到组件并验证登录凭证

嘿，作为Angular新手，你已经搭好了基础框架，咱们一步步把登录验证功能完善起来：

1. 先修正user.ts的导出问题 #

你现在的users数组是全局变量，组件没法直接访问它。咱们把它改成导出的常量，这样LoginComponent就能导入使用了：

export class User { 
  constructor(
    public id: number, 
    public username: string, 
    public password: string, 
    public firstName: string, 
    public lastName: string
  ) { } 
} 

// 改成导出的常量，让组件可以导入
export const users = [ 
  new User(1, 'user1', 'user1', 'John', 'Cena'), 
  new User(2, 'user2', 'user2', 'Randy', 'Orton'), 
  new User(3, 'user3', 'user3', 'Jeff', 'Hardy'), 
  new User(4, 'user4', 'user4', 'Matt', 'Hardy'), 
  new User(5, 'user5', 'user5', 'AJ', 'Styles') 
];

2. 在LoginComponent中导入用户数组并实现验证逻辑 #

现在你需要把users数组也导入到组件里，然后在login方法里写核心的匹配逻辑：

import { Component, OnInit } from '@angular/core'; 
import { User, users } from "../user"; // 新增users的导入

export class LoginComponent implements OnInit { 
  usernameTxt: string; 
  passwordTxt: string; 

  ngOnInit(): void {
    // 组件初始化逻辑（如果需要的话）
  }

  login() { 
    // 用数组find方法匹配用户名和密码
    const matchedUser = users.find(user => 
      user.username === this.usernameTxt && user.password === this.passwordTxt
    );

    if (matchedUser) {
      // 验证成功：这里可以跳转到首页、存储用户信息等
      console.log(`登录成功！欢迎你，${matchedUser.firstName} ${matchedUser.lastName}`);
      // 比如后续要跳转页面，需要先导入Router并注入到组件构造函数
      // this.router.navigate(['/dashboard']);
    } else {
      // 验证失败：提示用户用户名或密码错误
      alert('用户名或密码不正确，请重试');
    }
  } 
}

3. 完善登录模板（login.component.html） #

作为新手，你可能还需要一个简单的表单来让用户输入信息，记得要启用FormsModule（在你的模块里导入）：

<div class="login-form">
  <h2>登录</h2>
  <div>
    <label>用户名：</label>
    <input type="text" [(ngModel)]="usernameTxt" placeholder="请输入用户名">
  </div>
  <div>
    <label>密码：</label>
    <input type="password" [(ngModel)]="passwordTxt" placeholder="请输入密码">
  </div>
  <button (click)="login()">登录</button>
</div>

别忘了在你的模块（比如AppModule）里导入FormsModule，否则ngModel会报错：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有的导入项
    FormsModule
  ]
})
export class AppModule { }

额外小提示 #

• 如果需要忽略用户名的大小写，可以把判断改成user.username.toLowerCase() === this.usernameTxt.toLowerCase()
• 实际项目中，密码不会明文存储，这里只是演示前端验证，真实场景要调用后端API做验证
• 后续可以把用户数据放到Angular服务（Service）里，这是框架的最佳实践，方便后续扩展和复用

内容的提问来源于stack exchange，提问作者Dhawal Mhatre