Angular结合Firebase：带UID的帖子添加及动态页面创建问询

Hey there! I’ve built quite a few Angular + Firebase apps that handle exactly these scenarios, so let’s walk through each problem step by step.

Since you already know how to set up user auth and link user data, this is just a matter of attaching the current user’s UID to each post before saving it to Firestore. Here’s how to do it:

Step 1: Grab the current user’s UID #

First, inject AngularFireAuth and AngularFirestore into your component. Then create a helper method to get the logged-in user’s UID:

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {}

async getCurrentUserId(): Promise<string> {
  const user = await this.afAuth.currentUser;
  return user?.uid || '';
}

Step 2: Add the UID to your post data #

Create a method that takes your post content, adds the UID (and optional metadata like timestamp), then saves it to Firestore:

async addPost(postData: { title: string; content: string }) {
  const userId = await this.getCurrentUserId();
  
  // Handle cases where the user isn't logged in
  if (!userId) {
    alert('请先登录再发布帖子！');
    return;
  }

  // Merge the UID with your post data
  const postWithUser = {
    ...postData,
    uid: userId,
    createdAt: new Date() // 可选，但后续排序帖子会很有用
  };

  // 保存到Firestore的"posts"集合中
  await this.afs.collection('posts').add(postWithUser);
}

Step 3: Hook it up to your template #

用表单捕获帖子输入内容，提交时调用addPost方法：

<form (ngSubmit)="onSubmitPost()">
  <input 
    type="text" 
    [(ngModel)]="postTitle" 
    name="title" 
    placeholder="帖子标题"
    required
  >
  <textarea 
    [(ngModel)]="postContent" 
    name="content" 
    placeholder="写下你的内容..."
    required
  ></textarea>
  <button type="submit">发布帖子</button>
</form>

在组件中添加对应的变量和提交处理函数：

postTitle = '';
postContent = '';

onSubmitPost() {
  this.addPost({ title: this.postTitle, content: this.postContent });
  // 提交后重置表单
  this.postTitle = '';
  this.postContent = '';
}

这完全是利用路由参数来实现的：当用户点击某个项目时，通过URL中的项目ID获取对应的数据并展示。具体步骤如下：

Step 1: 设置动态路由 #

首先在app-routing.module.ts中定义一个接受projectId参数的路由，告诉Angular当URL匹配/projects/[某个项目ID]时加载详情组件：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';

const routes: Routes = [
  { path: 'projects', component: ProjectListComponent },
  { path: 'projects/:projectId', component: ProjectDetailComponent } // 这里是动态参数
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 2: 从项目列表页链接到详情页 #

在项目列表组件中，获取当前用户的所有项目（通过UID过滤），并生成包含每个项目Firestore文档ID的链接：

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

projects$: Observable<any[]>;

constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {}

ngOnInit() {
  // 只获取当前用户的项目（通过UID过滤）
  this.projects$ = this.afAuth.authState.pipe(
    map(user => {
      if (user) {
        // 使用`idField`将Firestore文档ID添加为每个项目的`projectId`字段
        return this.afs.collection('projects', ref => ref.where('uid', '==', user.uid))
          .valueChanges({ idField: 'projectId' });
      }
      return [];
    })
  );
}

在列表模板中，循环渲染项目并创建路由链接：

<div class="project-grid">
  <div *ngFor="let project of projects$ | async" class="project-card">
    <a [routerLink]="['/projects', project.projectId]">
      <h3>{{ project.title }}</h3>
      <p>{{ project.description }}</p>
      <img [src]="project.imageUrl" alt="{{ project.title }}">
    </a>
  </div>
</div>

Step 3: 在详情页获取并展示特定项目 #

在ProjectDetailComponent中，使用ActivatedRoute获取URL中的projectId，然后从Firestore中获取该项目的具体数据：

import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

project$: Observable<any>;

constructor(private route: ActivatedRoute, private afs: AngularFirestore) {}

ngOnInit() {
  // 从URL参数中获取项目ID
  const projectId = this.route.snapshot.paramMap.get('projectId');
  
  if (projectId) {
    // 获取指定的项目文档
    this.project$ = this.afs.collection('projects').doc(projectId).valueChanges();
  }
}

然后在详情模板中展示项目数据：

<div *ngIf="project$ | async as project" class="project-detail">
  <h1>{{ project.title }}</h1>
  <p class="description">{{ project.description }}</p>
  <img [src]="project.imageUrl" alt="{{ project.title }}" class="project-image">
  <!-- 这里可以添加更多项目专属字段的展示 -->
</div>

<!-- 可选：数据加载时显示加载状态 -->
<div *ngIf="!(project$ | async)" class="loading">正在加载项目详情...</div>

安全提示 #

确保你的Firestore安全规则设置正确，只允许用户访问自己的项目。以下是projects集合的基础规则示例：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /projects/{projectId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.uid;
    }
  }
}

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