使用服务在组件之间共享数据不起作用 (Angular)

Question

我有两个组件，第一个称为 product，第二个称为 product-details。

我想点击 product 导航到 `product-details`` 组件（这两个组件未显示在同一页面中）。

我创建了一个名为 sessionService 的服务来在这两个组件之间传递数据。我查看了多个解决方案并尝试了这个：

但它不起作用。

这是会话服务：

import { Injectable } from '@angular/core';
import {IProduct} from "./product";
import { BehaviorSubject} from "rxjs/internal/BehaviorSubject";

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

  private product = new BehaviorSubject<IProduct>({name:'asd',id:3,image:"asas",price:"asd"});
  currentProduct = this.product.asObservable();
  changeProduct(product:IProduct){
    console.log("shit");
    this.product.next(product);
  }

  constructor() {}

}

这里是产品组件：

import {Component, Input, OnInit} from '@angular/core';
import {IProduct} from "../product";
import {SessionService} from "../session.service";

@Component({
  selector: 'ec-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  @Input() product:IProduct;
  @Input() productShape:string;
  constructor(private sessionService:SessionService) { }

  ngOnInit() {
  }

  goToProductDetails(){
    window.location.href = "product";
    this.sessionService.changeProduct(this.product);
  }
}

这是产品模板：

<div class="prod-ver" *ngIf="productShape==='vertical'" (click)="goToProductDetails()">
  <figure class="fig-ver"><img [src]="product.image" alt="product"></figure>
  <div class="p-name">{{product.name}}</div>
  <div class="p-price">{{product.price}}</div>
</div>

产品详情组件：

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {IProduct} from "../product";
import {SessionService} from "../session.service";

@Component({
  selector: 'ec-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.scss']
})
export class ProductDetailsComponent implements OnInit {

  productId:number;
  products:IProduct[];
  product:IProduct;
  constructor(private route:ActivatedRoute,private sessionService:SessionService) { }

  ngOnInit() {
    this.sessionService.currentProduct.subscribe(
      product => {
        this.product = product;
        console.log(this.product);
      }
    );
  }
  }
}

Answer 1

作为最佳实践，我会将产品 ID 与请求一起传递到详细信息页面，然后使用 resolver.

加载产品

或者，我建议使用 angular 路由器而不是 window.location.href = "product"; 这样页面就不会刷新，并且存储在您的服务中的状态应该持续存在。确保将 import { AppRoutingModule } from './app-routing.module'; 包含到您的 app.module.ts.

中

import {Component, Input, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {IProduct} from "../product";
import {SessionService} from "../session.service";

@Component({
  selector: 'ec-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  @Input() product:IProduct;
  @Input() productShape:string;
  constructor(
    private sessionService:SessionService,
    private router: Router
  ) { }

  ngOnInit() {
  }

  goToProductDetails(){
    this.router.navigate(['/product']);
    this.sessionService.changeProduct(this.product);
  }
}

使用服务在组件之间共享数据不起作用 (Angular)

Sharing data between components using service is not working (Angular)

angular-services

angular