typescript - 使用 Angular js 将用户添加到 Firestore
我在注册时尝试创建新用户，但出现此错误
将用户添加到 Firestore 时出错 RuntimeError: NG0203: inject() 必须从注入上下文中调用，例如构造函数、工厂函数、字段初始化器或与
runInInjectionContext一起使用的函数。更多信息请访问 https://angular.dev/errors/NG0203\ 位于 signup.component.ts:28:15
当我查看 Firebase 时，电子邮件已注册，但它没有创建 users 集合，这里你可以看到我的代码：signup component.ts
import { Component } from '@angular/core';
import { AuthService } from '../services/auth';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';
@Component({
selector: 'app-signup',
standalone: true,
imports: [
CommonModule,
FormsModule,
AngularFireAuthModule,
RouterModule,
],
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent {
constructor(private sa: AuthService, private fs: AngularFirestore) {}
signup(f: any) {
let data = f.value;
this.sa.signUp(data.email, data.password).then((user) => {
this.fs.collection("users").doc(user.user?.uid).set({
email: data.email,
name: data.name,
bio: data.bio,
uid: user.user?.uid
}).then(() => {
console.log("User added to firestore");
});
}).catch((error) => {
console.log("Error adding user to firestore", error);
});
}
}
注册组件.html
<div class="uk-section uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport>
<div class="uk-width-1-1">
<div class="uk-container">
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid>
<div class="uk-width-1-1@m">
<div
class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large">
<h3 class="uk-card-title uk-text-center">Create an Account</h3>
<form (ngSubmit)="signup(f)" #f="ngForm">
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: user"></span>
<input class="uk-input uk-form-large" type="text" id="name" ngModel #name="ngModel"
name="name" placeholder="Name" required>
</div>
<!-- Error message for Name -->
<div *ngIf="name.invalid && name.touched" class="uk-text-danger">
Name is required.
</div>
<div class="uk-form-icon uk-form-icon-flip" *ngIf="name.invalid && name.touched">
<span uk-icon="icon: warning"></span>
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: mail"></span>
<input class="uk-input uk-form-large" type="email" id="email" ngModel
#email="ngModel" name="email" placeholder="Email" required email>
</div>
<div *ngIf="email.errors?.['required'] && email.touched" class="uk-text-danger">
Email is required.
</div>
<div *ngIf="email.errors?.['email'] && email.touched" class="uk-text-danger">
Insert Valid Email.
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<span class="uk-form-icon" uk-icon="icon: lock"></span>
<input class="uk-input uk-form-large" type="password" id="password" ngModel
#password="ngModel" name="password" placeholder="Password" required
minlength="6" maxlength="8">
</div>
<div *ngIf="password.errors?.['required'] && password.touched" class="uk-text-danger">
Password is required.
</div>
<div *ngIf="password.errors?.['minlength'] && password.touched" class="uk-text-danger">
Password must be at least 6 characters long.
</div>
<div *ngIf="password.errors?.['maxlength'] && password.touched" class="uk-text-danger">
Password cannot be more than 8 characters long.
</div>
</div>
<div class="uk-margin">
<div class="uk-inline uk-width-1-1">
<textarea class="uk-textarea uk-form-large" id="bio" ngModel #bio="ngModel"
name="bio" placeholder="Bio" rows="3"></textarea>
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="submit"
[disabled]="f.invalid">Sign Up</button>
</div>
<div class="uk-text-small uk-text-center">
Already have an account? <a [routerLink]="['/signin']">Sign In</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
auth.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user: Observable<firebase.User | null>;
constructor(private fa: AngularFireAuth) {
this.user = this.fa.user;
}
signUp(email: string, password: string) {
return this.fa.createUserWithEmailAndPassword(email, password);
}
signIn(email: string, password: string) {
return this.fa.signInWithEmailAndPassword(email, password);
}
}
我一直在努力并且做了很多改变，但它不起作用。抱歉，我的英语不太好，我是新学习 Angular 的。
答案＃1
查看这个来自 Angular/fire GitHub 页面的示例
自述文件.md
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
...
...
export class AppComponent {
firestore = inject(Firestore);
itemCollection = collection(this.firestore, 'items');
item$ = collectionData<Item>(itemCollection);
}
你可能还需要像下面一样提供 Firebase，对于身份验证也需要完成不同的步骤：
auth.md
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
export const appConfig: ApplicationConfig = {
providers: [
provideFirebaseApp(() => initializeApp({ ... })),
provideFirestore(() => getFirestore()),
provideAuth(() => getAuth()),
...
],
...
})
所以你的代码可以修改为：
...
export class SignupComponent {
firestore = inject(Firestore);
constructor(private sa: AuthService) {}
signup(f: any) {
let data = f.value;
this.sa.signUp(data.email, data.password).then((user) => {
collection(this.firestore, "users").doc(user.user?.uid).set({
email: data.email,
name: data.name,
bio: data.bio,
uid: user.user?.uid
}).then(() => {
console.log("User added to firestore");
});
}).catch((error) => {
console.log("Error adding user to firestore", error);
});
}
}
您必须更新您的身份验证功能以使用以下逻辑：
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<firebase.User | null> = user(auth);
fa = inject(Auth);
signUp(email: string, password: string) {
return this.fa.createUserWithEmailAndPassword(email, password);
}
signIn(email: string, password: string) {
return this.fa.signInWithEmailAndPassword(email, password);
}
}