Question

我有两个部分，第一个被称为product，第二个被称为product-details。

我想单击product导航到“产品详细信息”组件（这两个组件未显示在同一页面中）。

我创建了一个名为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);
      }
    );
  }
  }
}

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

使用服务在组件之间共享数据不起作用（角度）

1 个答案: