通过Subject将数据从一个组件传递到另一个组件

16 浏览
0 Comments

通过Subject将数据从一个组件传递到另一个组件

我试图通过使用Subject和.pipe(take(1))将数据从updateproducts.component.ts传递到updatecardproducts.component.ts。

我遇到的问题是，当我点击父组件的编辑按钮时（它只是将我导航到更新产品组件），它确实将我带到了更新产品组件，但是在控制台中我第一次看不到任何内容，但是如果我再次点击，我就会得到结果，然后之后一切都正常工作，问题只存在于我第一次点击编辑按钮时。以下是代码：

updateproducts.component.ts

export class UpdateproductsComponent implements OnInit {
recipeform:FormGroup
id:number
product
editmode=false
constructor(private route:ActivatedRoute,private router:Router,private prservice:Productservice) { }
ngOnInit() {
this.route.params.subscribe(
  (params)=>{
  this.id=+params['id']
  if(params['id']!=null){
    this.editmode=true
  }
  this.initform()
    })
}
private initform(){
let title=''
let price=''
let select=''
let imageurl=''
if(this.editmode){
   const product=this.prservice.getproductbyid(this.id)
  title=product.title
  price=product.price
  select=product.select
  imageurl=product.imageurl
  this.prservice.updatedproduct.next(product)
  //这是我试图传递的值
}
this.recipeform=new FormGroup({
  'title':new FormControl(title,Validators.required),
  'price':new FormControl(price,Validators.required),
  'select':new FormControl(select,Validators.required),
  'imageurl':new FormControl(imageurl,Validators.required)
})
}
}

products.service.ts

import { Subject } from "rxjs";
export class Productservice{
updatedproduct=new Subject()
card=new Subject()
cards=[]
addtocards(value){
    this.cards.push(value)
}
getallproducts(){
    return this.cards
}
getproductbyid(id){
    return this.cards[id]
}
updateproduct(id,product){
   return  this.cards[id]=product
}
}

updateproducts.component.ts

export class UpdatecardproductsComponent implements OnInit {
subscription:Subscription
carddetails
constructor(private prservice:Productservice) { }
ngOnInit() {
this.subscription=this.prservice.updatedproduct.pipe(take(1))
.subscribe(
  (value)=>{
this.carddetails=value
 console.log(this.carddetails)
  }
)
}
}

因此，首次渲染此组件时，我在控制台中看不到任何内容(this.carddetails)，但之后从第二次开始，一切正常，并在控制台中显示。

0