Доступ к параметрам маршрута - angular 8 - PullRequest
Новая
       13

Доступ к параметрам маршрута - angular 8

0 голосов
/ 27 января 2020

Привет, я пытаюсь создать сайт с продуктами, но я не могу получить данные от productsComponent к ProductDetailsComponent. Пожалуйста, помогите мне.

В моем Product.ts у меня есть: 

    export class Product {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

В моем ProductsCompon enet у меня есть: 

    import { Component } from '@angular/core';
import { Product } from '../services.service';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})
export class ServicesComponent {
  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product 005"),
    new Product(6, "Product 006"),
    new Product(7, "Product 007"),
    new Product(8, "Product 008")
  ];
}

И в моем ProductDetailComponent: 

    import {Component, OnInit} from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { Product } from '../services.service';



@Component({
  selector: 'app-detail-service',
  templateUrl: './detail-service.component.html',
  styleUrls: ['./detail-service.component.css']
})
export class DetailServiceComponent implements OnInit {

  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product 005"),
    new Product(6, "Product 006"),
    new Product(7, "Product 007"),
    new Product(8, "Product 008")
  ];
  product: Product = this.products[0];

  constructor(private routes: ActivatedRoute) {}
  ngOnInit() {
    this.routes.params.subscribe(params => {
      this.products.forEach((p: Product) => {
        if (p.id === params.id) {
          this.product = p;
        }
      });
    });
  }
}

Я показываю все продукты в продуктах. html и после того, как я нажимаю на любой продукт, он отображает мои продукты. html с моим продуктом, но не показывает правильное имя и идентификатор. Он показывает первый в каждом продукте, но связь с идентификатором продукта правильная. Пожалуйста помоги. Я действительно не могу понять, что происходит.

1 Ответ

0 голосов
/ 28 января 2020

Чтобы решить вашу проблему напрямую, вы должны сделать что-то вроде: 

this.route.paramMap.subscribe(params => {
   let id = params.get('id');
   this.product = this.products.find(product => product.id === +id);
})

Обратите внимание, что параметры маршрута всегда являются строками, поэтому в приведенном выше фрагменте я преобразовываю идентификатор в число в find method.

Однако я бы порекомендовал вам вообще избегать явной подписки. Ниже я опишу более поддерживаемую реализацию, которая более точно следует за реактивной парадигмой, и я включил пример работающего стекаблика. оператор switchMap и используйте сервис продукта, чтобы получить продукт по id.

Ваш product-detail.component.ts будет выглядеть следующим образом: 

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  product$: Observable<any>;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService
  ) { }

  ngOnInit() {
    this.product$ = this.route.paramMap.pipe(
      switchMap(params => {
        let id = params.get('id');
        return this.productService.getProductById(+id);
      })
    )
  }

}

Обратите внимание, что pipe не будет выполняться, пока мы не подпишемся на него. Мы должны использовать async трубу для этого. Таким образом, ваш product-detail.component. html должен выглядеть следующим образом: 

<div class="product-detail-wrapper" *ngIf="product$ | async as product">
  <h3>Product Detail</h3>
  <p>Product ID: {{ product.id }}</p>
  <p>Product Name: {{ product.name }}</p>
</div>

В качестве рабочего примера посмотрите этот stackblitz .

...