AngularFire：从特定用户通过 URL 传递 ID 获取信息

Question

我正在使用 Angular 10 和 AngularFire 从 Firebase 收集数据。我的组件 users.component.ts 上已经有我的用户列表，我在 users.component.html 上列出了他们。他们单击用户名，然后转到 user-details.component，从 URL 获取用户 ID 并在视图上打印此 ID。

我需要的是使用这个 snapshotParam 从 firebase 获取这个特定用户的数据并将其显示在我的视图上。

类似：const user = firestore.collection('users').doc(this.snapshotParam);

但是当我在 ngOnInit 上执行此操作时出现错误：找不到名称“firestore”。

如果我把它放在构造函数上，我无法获得在 ngOnINit 上声明的 snapshotParam。

最好的方法是什么？

感谢您的帮助！

我的用户详细信息代码是：

user-details.component.ts

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private readonly route: ActivatedRoute,
    firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.subscribe(params => {
      this.subscribedParam = params.get("id");
    });


  }

}

我已经可以在视图上打印用户 ID

user-details.component.html

<p><strong>USER ID:</strong> {{ snapshotParam }}</p>

Answer 1

您忘记在构造函数中的“firestore”旁边添加“private”。然后，您可以像这样在 ngOnInit 函数中调用 firestore：

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private route: ActivatedRoute,
    private firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    ).subscribe();


  }

关于视图的更新
我会定义一个 observable 并使用管道异步

组件：

...
    this.user$ = this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    )

...

模板：

    <div *ngIf="user$ | async as user">{{user.name}}</div>