Angular 11应用报'Cannot find name 'user''错误的原因是什么

这个Cannot find name 'user'是TypeScript的作用域校验错误，触发逻辑非常直接：

• 你在组件的checkUserStatus方法内调用this.UserService.checkUserStatus(user)时，传入的参数user没有在当前可访问的作用域内定义。
  服务层的checkUserStatus(user: UserModel)只是声明了调用这个方法时需要传一个叫user的参数，并不会在组件的作用域里自动生成这个变量。你当前的组件方法既没有声明user入参，组件类里也没有定义可访问的user类属性，编译器找不到对应变量就会抛出这个错误。

另外你的代码还有两个会导致后续运行报错的隐性问题：

• UserService缺少@Injectable()装饰器，不符合Angular服务的可注入要求
• 组件没有通过构造函数注入UserService的实例，直接通过this.UserService访问是拿不到服务对象的，后续会报UserService未定义的错误

1. 修正服务代码 #

import { Injectable, OnDestroy } from '@angular/core';
import { UserModel } from '../path/to/UserModel';

// 补充可注入装饰器
@Injectable({
  providedIn: 'root'
})
export class UserService implements OnDestroy {
    public isActiveUser: boolean = false;

    public checkUserStatus(user: UserModel) {
        // 注意当前逻辑没有使用传入的user参数，若需要基于传入用户判断状态请补充对应逻辑
        return this.isActiveUser;
    }
}

2. 修正组件代码 #

你可以根据业务场景选其中一种写法：

写法1：通过方法入参传递user #

import { Component, OnInit } from '@angular/core';
import { UserService } from '../path/to/user-service.service';
import { UserModel } from '../path/to/UserModel';
    
export class UserComponent implements OnInit {
    public isActiveUser: boolean;

    // 构造函数注入服务实例
    constructor(private userService: UserService) {}

    ngOnInit(): void {}

    // 给组件方法定义user入参
    public checkUserStatus(user: UserModel) {
        this.isActiveUser = this.userService.checkUserStatus(user);
    }
}

后续在模板调用该方法时传入具体用户对象即可，比如<button (click)="checkUserStatus(currentLoginUser)">检查状态</button>

写法2：使用组件类属性作为参数 #

如果user对象是组件的固定属性，不需要从方法调用处传参，可以直接用类属性传值：

import { Component, OnInit } from '@angular/core';
import { UserService } from '../path/to/user-service.service';
import { UserModel } from '../path/to/UserModel';
    
export class UserComponent implements OnInit {
    public isActiveUser: boolean;
    // 提前声明组件持有的用户对象
    public currentUser: UserModel;

    constructor(private userService: UserService) {}

    ngOnInit(): void {
        // 初始化时给currentUser赋值，比如从接口拉取、从路由参数获取等
    }

    public checkUserStatus() {
        this.isActiveUser = this.userService.checkUserStatus(this.currentUser);
    }
}

内容的提问来源于stack exchange，提问作者Razvan Zamfir