NativeScript登录功能异常：用户信息无法传递至服务

我来帮你一步步排查并解决这两个核心问题：NullInjectorError报错，以及登录/注册时TextField数据无法传递到服务的问题。

问题1：NullInjectorError: No provider for User! #

这个错误的根源很清晰：你之前在LoginService的构造函数里尝试注入User类，但**User是普通的模型类，不是Angular可注入的服务**，Angular无法为它生成依赖注入实例，所以抛出了这个错误。你已经注释掉了构造函数里的private user: User，这步操作是对的，保持这个修改即可。

问题2：TextField数据无法传递到LoginService #

这个问题有两个关键原因：

1. 组件里的user对象未初始化，导致ngModel没有绑定目标，输入的邮箱和密码根本没地方存储
2. 服务的login/register方法没有接收组件传递的user参数，而是用自己独立维护的user实例，两者数据完全不互通

具体修改步骤： #

1. 初始化LoginComponent里的user对象

在LoginComponent的构造函数中取消注释this.user = new User();，让模板的双向绑定有具体的对象可以挂载：

constructor(
    private router: Router,
    private routerExtensions: RouterExtensions,
    private page: Page,
    private userService: LoginService
) {
    this.user = new User(); // 取消注释这行！
}

2. 修改LoginService，接收组件传递的user参数

删掉服务里自己的user实例，让login和register方法接收组件传过来的用户数据：

@Injectable()
export class LoginService {
    // 删掉这行：user = new User;
    constructor(private routerExtensions: RouterExtensions) { }

    register(user: User) { // 添加user参数
        return new Promise((resolve, reject) => {
            console.log("Creating user: " + user.email); // 使用参数的user
            firebase.createUser(
                { email: user.email, password: user.password }) // 替换为参数的属性
                .then(
                    () => { alert("User created, email: " + user.email) }, // 移除this.user
                    (errorMessage) => { alert("Error: " + errorMessage) }
                );
        })
    }

    login(user: User) { // 添加user参数
        return new Promise((resolve, reject) => {
            console.log("Login.service.ts: Logging in user: " + user.email); // 使用参数的user
            firebase.login(
                { type: firebase.LoginType.PASSWORD,
                  passwordOptions: { email: user.email, password: user.password } // 替换为参数的属性
                })
                .then(result => {
                    console.log("Login success:", result);
                    resolve(result); // 记得把结果resolve给组件
                })
                .catch(error => {
                    console.log("Login.service. Error: " + error);
                    reject(error); // 记得把错误reject给组件
                });
        });
    }

    // logout方法保持不变
}

3. 修改LoginComponent的方法，传递user给服务

在login和signUp方法里，把组件的this.user传递给服务的对应方法：

login() {
    console.log("Login triggered");
    console.log("User email: " + this.user.email);
    console.log("User password: " + this.user.password);
    this.userService.login(this.user) // 传递组件的user对象
        .then(status => {
            setString("userID", String(this.user.email));
            this.routerExtensions.navigate(["/home"], { clearHistory: true });
        }, err => {
            this.clearFields();
            alert("Unfortunately we could not find your account.")
        });
}

signUp() {
    this.userService.register(this.user) // 传递组件的user对象
        .then(status => {
            alert("Your account was successfully created.");
            this.toggleDisplay();
            this.clearFields();
        }, err => {
            this.clearFields();
            alert("Unfortunately we were unable to create your account.")
        });
}

4. 确保LoginService的正确提供

不要在AppComponent的providers数组里添加服务，而是在**根模块（比如AppModule）**的providers数组中注册LoginService，这样整个应用会共用一个服务单例：

// app.module.ts
import { NgModule } from "@angular/core";
import { LoginService } from "./shared/login.service";

@NgModule({
    // ...其他配置项
    providers: [
        LoginService,
        // ...其他需要注册的服务
    ]
})
export class AppModule {}

测试验证 #

完成以上修改后重新运行应用：

• 输入邮箱和密码，控制台应该能正确打印出你输入的内容
• 登录和注册功能会正常调用Firebase的API，不再出现数据为空的情况
• NullInjectorError报错也会彻底消失

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