Когда я перенаправляю с продуктов на продукты / детали, URL показывает неверный идентификатор

Question

Я пытаюсь перенаправить из списка продуктов на страницу product-details, но мой URL-адрес показывает неправильное значение для идентификатора:

, например: https://cafe -c3c52.firebaseapp.com/admin/products;node_=%5Bobject%20Object%5D;ref_=https:%2F%2Fcafe-c3c52.firebaseio.com%2Fproducts%2F-LNpWrMiZ8YRAiaf8K9q;index_=68***100100* Правильно будет: https://cafe -c3c52.firebaseapp.com / admin / products / id

Можете ли вы помочь мне выяснить, что не так:

admin-products.component.html

<tbody>
  <tr *ngFor="let p of products$ | async">
    <td>{{p.title}}</td>
    <td>{{p.price}}</td>
    <td><a [routerLink]="['/admin/products/', p.key]"> Edit</a> </td>
    <td> {{p.key}}</td>
  </tr>
</tbody>

admin-products-component.ts

export class AdminProductsComponent implements OnInit {
  products$;

  constructor(private productService: ProductService) {
    this.products$ = this.productService.getAll();
  }
  ...
}

products.form.component

export class ProductsFormComponent implements OnInit {
  categories$;
  product;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService
  ) {
    this.categories$ = categoryService.getCategories();
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.productService.get(id).snapshotChanges().pipe(
        take(1)).subscribe(p => this.product = p);
    }
  }
}

product.service

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) {}

  getAll() {
    return this.db.list('/products').snapshotChanges().map(
      changes => {
        return changes.map(c => ({
          key: c.payload,
          ...c.payload.val()
        }));
      });
  }

  get(productId) {
    return this.db.object('/products/' + productId);
  }
}

Answer 1

Это потому, что вы используете this.route.snapshot.paramMap.get('id');.В идеале вы должны подписаться на this.route.params, который является BehaviorSubject, чтобы получить обновленный идентификатор.

Кроме того, вы должны стараться, чтобы ваши constructor s были как можно более легкими.Поэтому, пожалуйста, рассмотрите возможность перемещения вашего constructor кода в ngOnInit

. Измените ProductsFormComponent реализацию следующим образом:

export class ProductsFormComponent implements OnInit {
  categories$;
  product;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService
  ) { }

  ngOnInit() {
    this.categories$ = categoryService.getCategories();
    this.route.params
      .subscribe(params => {
        const id = params['id'];
        if (id) {
          this.productService.get(id).snapshotChanges().pipe(
            take(1)).subscribe(p => this.product = p);
        }
      });
  }

}