基于Angular 5根据键值从Firebase数据库获取特定数据

Hey there! Let's work through getting your Angular 5 + Firebase dynamic routing and post details page up and running smoothly—since you already have the CRUD basics locked in, this should come together once we align the Firebase data structure, routing, and component logic.

Step 1: Configure Dynamic Routing #

First, update your app's routing module to handle the slug-based URL pattern. We'll set up a parameterized route that captures the post slug (like howtoDoSomething) from the URL:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailsComponent } from './details/details.component';
// Import other components as needed

const routes: Routes = [
  // Other routes here
  { path: 'blog/:postSlug', component: DetailsComponent },
];

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

Step 2: Prepare Firebase Data Structure #

Unlike your old JSON setup, you'll need to ensure each post in Firebase has a unique slug field that matches the URL segment (e.g., howtoDoSomething). Your Firestore/Realtime Database post documents should look something like this:

• Firestore example:

  {
    "id": "abc123",
    "title": "How to Do Something",
    "slug": "howtoDoSomething",
    "content": "Step-by-step guide...",
    "imageUrl": "https://example.com/post-image.jpg"
  }
  

• Realtime Database example:

  "posts": {
    "howtoDoSomething": {
      "title": "How to Do Something",
      "content": "Step-by-step guide...",
      "imageUrl": "https://example.com/post-image.jpg"
    }
  }
  

Step 3: Fetch Post Data in Details Component #

Update your details.component.ts to grab the slug from the route, then query Firebase for the matching post. Here's how to do it for both Firestore and Realtime Database:

For Firestore:

// details.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {
  post$: Observable<any>;

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

  ngOnInit(): void {
    // Get the slug from the URL parameter
    const postSlug = this.route.snapshot.paramMap.get('postSlug');
    
    // Query Firestore for the post with a matching slug
    this.post$ = this.afs.collection('posts', ref => 
      ref.where('slug', '==', postSlug)
    ).valueChanges();
  }
}

For Realtime Database:

// details.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit {
  post$: Observable<any>;

  constructor(
    private route: ActivatedRoute,
    private db: AngularFireDatabase
  ) { }

  ngOnInit(): void {
    const postSlug = this.route.snapshot.paramMap.get('postSlug');
    // Fetch directly using the slug as the node key
    this.post$ = this.db.object(`posts/${postSlug}`).valueChanges();
  }
}

Step 4: Render Post Details in the Template #

Use Angular's async pipe to safely subscribe to the observable and display your post data in details.component.html:

<div class="post-container">
  <!-- Show loading state while data fetches -->
  <div *ngIf="!(post$ | async)" class="loading">Loading post...</div>

  <!-- Render post details once data is available -->
  <div *ngIf="post$ | async as post" class="post-details">
    <h1>{{ post.title }}</h1>
    <img [src]="post.imageUrl" alt="{{ post.title }}" class="post-image">
    <div class="post-content">
      {{ post.content }}
    </div>
    <!-- Add any other fields you need to display -->
  </div>
</div>

Troubleshooting Common Issues #

• Firebase Permissions: Make sure your Firebase security rules allow read access to the posts collection/node (for testing, you can temporarily set allow read, write: if true; then lock it down for production).
• Slug Matching: Ensure the slug in Firebase exactly matches the URL segment (check for typos, capitalization differences—URLs are case-sensitive!).
• Routing Conflicts: Double-check that no other routes are matching before /blog/:postSlug (order matters in Angular routing!).

If you run into specific errors (like console logs showing missing data or routing failures), feel free to share those details and we can refine this further!

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