使用服务在组件之间共享数据不起作用（Angular）答案

【问题标题】：Sharing data between components using service is not working (Angular)使用服务在组件之间共享数据不起作用（Angular）
【发布时间】：2019-03-05 23:50:03
【问题描述】：

我有两个组件，第一个叫做product，第二个叫做product-details。

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

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

How to share data between components using a service properly? 但它不起作用。

这里是会话服务：

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);
      }
    );
  }
  }
}

【问题讨论】：

你在使用 rxjs 吗？
是的，我正在使用来自 rxjs 的 BehaviourSubject
好的，所以首先你不应该使用 window.location.href ，这就是你有角度路由器的原因。
我相信 window.href 会重新加载应用程序，因此您的订阅将被销毁，请改用角度路由器..
使用服务（使用 BejaviourSubject）需要两个组件同时在应用程序中。否则，您可以使用属于服务的简单变量并在每个组件中使用 getter/setter。（注意：也要考虑@jetset solucion）。有很多关于使用变量的例子，你可以看我的stackbliz stackblitz.com/edit/angular-rrv6hs

标签： angular angular-services

【解决方案1】：

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

或者，我建议使用角度路由器而不是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);
  }
}

【讨论】：

非常感谢，window.location.href 是问题