Asp.Net core 6 Web Api & Angular：按 id 显示用户

Question

我不会介绍服务器端的一切对我来说都很好。

在客户端中，我无法显示特定用户登录后，我希望主页在导航到主页时显示其用户名

我希望它看起来如何：

登录页面：

主页：

在我试图做的代码中：

环境：

  baseApiUrl: 'https://localhost:44370',
  baseApiUsersUrl:'/api/Users',

HTTP客户端：

getUser(id: string):Observable<User>{
    return this.http.get<User>(this.baseUrl + this.baseUsersUrl + '/' + id)
  }

登录组件.ts：

export class LoginComponent implements OnInit {

  loginForm: FormGroup = new FormGroup({});
  errors:string[] = []
  

  constructor(private formBuilder:FormBuilder
    ,private router:Router,private usersService:UsersService) { }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      userName:[''],
      password:['']
    });
  }

  login(){
    this.usersService.getAllUsers()
    .subscribe(res=> {
      const user = res.find((a:any)=>{
        return a.userName === this.loginForm.value.userName && a.password === this.loginForm.value.password
      });
      if(user){
        alert("Login Success!");
        this.loginForm.reset();
        this.router.navigate(['home']);
      }
      else{
          this.loginForm.value.userName
            this.errors = [];
            this.errors.push(`The user name ${this.loginForm.value.userName} not exist`);
      }
    },(e)=> {
      // alert("Somthing went wrong")
      // alert(e.error.errors.UserName)
    })
  }

}

HomeComponent.ts：

export class HomeComponent implements OnInit {

  user!:User;
  message = '';
  constructor(private usersService:UsersService,private route:ActivatedRoute) { }

 

  
  ngOnInit(): void {
    this.route.paramMap.subscribe(
      params =>{
        const id = params.get('id');
        if(id){
          this.usersService.getUser(id)
          .subscribe(
            response =>{
               this.user = response;
               this.message = `Hi ${response.userName}`
            }
          )
        }
      }
    )
    }
  }

主页 HTML：

{{message}}

{{user.userName}}