什么是更好的方法，以及如何实现将对象从一个嵌套组件发送到另一个嵌套组件 [英] What is a better way and how to achieve sending object from one nested component to another

问题描述

我正在开发有关产品的简单应用程序，基本上，当用户选择一个产品时，应该将其发送到另一个保存产品的组件中.

I'm working on simple application about products, basically when user choose a product it should be sent to another component which would hold product.

总是选择一个产品，我从不发送列表！只能按项目逐项！

Product is allways choosen one by one, I am NEVER sending a LIST! Only item by item!

因此，基本上，当我单击屏幕中间的任何产品(产品食品1，产品食品2，产品食品3 )时，应将其发送到屏幕的右侧，即也是分开的组件.

So basically when I click on any of products in the middle of screen (Product food 1, Product food 2, Product food 3) it should be sent to the right part of the screen which is also separated component.

所以我的中间部分看起来像这样:

So my middle component looks like this:

<div *ngFor="let product of products;" class="product-holder">
  <div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>

还有打字稿代码:

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

  products: Article[];

  constructor(private _sharedService: SharedService) { }

  ngOnInit() {
    this._sharedService.getEventSubject().subscribe((param: any) => {
      if (param !== undefined) {
        this.theTargetMethod(param);
      }
    });
  }

  theTargetMethod(param) {
    // Here I am populating middle screen with products 
    this.products = param;
  }
}

现在，我将发布我应该接收产品的正确组件:

And now I will post my right component which should receive product :

<div class="order-article">
  <div class="order-img"></div>
  <div class="order-title">
    <p>HERE I SHOULD WRITE ARTILE TITLE</p>
  </div>
  <div class="order-quantity pull-right">
    <span class="order-quantity-number">ARTICLE QUANTITY</span>
  </div>
</div>

export class ReceiptItemComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

因此，这个正确的"组件应该从中间接收点击的产品，我不知道该怎么做，我对 @Input 和 @Output 装饰器以及有关 services 的问题，我猜这里@input和@output是正确的解决方案，因为我要一一发送?

So this 'right' component should receive clicked product from the middle, and I don't know how to do it, I red about @Input and @Output decorators and also about services, I guess @input and @output are right solution here because I'm sending one by one item?

但是我实际上不知道如何解决这个问题.

But I don't know practically how to to solve this..

任何一种帮助都很棒

谢谢

在fjc帮助之后:

<div *ngFor="let product of products;" class="product-holder" (click)="addReceiptItem(article)">
  <div id="product.id" class="product" [style.background]="'url('+ product.imgUrl +')'">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>

正如您所看到的，伙计们:

As you can see guys:

1.)我添加了 addReceiptItem 方法

2.)此方法接受点击的产品:

2.) This method accepts clicked product:

addReceiptItem(receiptItem: Product) {
    this._sharedService.addReceiptItem(receiptItem);
  }

3.)注入服务" _sharedService "并在那里创建方法也称为"addReceiptItem"

3.)Injected service '_sharedService' and created method there called also 'addReceiptItem'

4.)在我的服务中，我这样创建了 BehaviorSubject : private receiveItem = new BehaviorSubject< any>(未定义)；

4.)In my service I created BehaviorSubject like this: private receiptItem = new BehaviorSubject<any>(undefined);

4.)服务中的方法如下:

4.)Method in a service looks like this:

addReceiptItem(receiptItems: Product) {
    this.arr1.push(receiptItems);
    this.receiptItem.next(this.arr1);
  }

此方法将点击的项目推送到一个数组中，该数组将被发送到显示产品的组件中

This method is pushing clicked items to an array which will be send to a component that displays products

4.11)还添加了用于获取返回BehaviorSubject的数据的方法:

4.11) Added also method for getting data which returns BehaviorSubject:

getReceiptItem(): BehaviorSubject<any> {
    return this.receiptItem;
  }

5.)显示产品的已编辑组件(在执行任何操作之前也发布了代码-空的打字稿文件)，现在看起来像这样:

5.)Edited Components that display products (code was posted also before doing anything - empty typescript file), and now it looks like this:

export class ReceiptItemComponent implements OnInit {

  constructor(private _sharedService: SharedService) { }

  receiptItems: Product[];

  ngOnInit() {
    this._sharedService.getReceiptItem().subscribe(products => this.receiptItems = products);
  }

}

只剩下以某种方式销毁吗?

Left is only to do destroy somehow?

推荐答案

有两种策略可以解决此问题.总的来说，这是一个状态管理问题:多个组件正在一个联合状态下工作.

There are a couple of strategies to solve this. Overall, this is a state management problem: Multiple components are working on one joint state.

这可能是最简单的解决方案.

This might be the most simple solution.

• 包含所有其他组件的父组件具有选定产品的列表.
• 允许用户选择产品的子组件具有@Output()EventEmitter，该事件在用户选择产品时发出.父组件侦听该输出，并将发出的产品添加到其产品列表中.
• 显示选定产品的子组件具有一个@Input()产品数组，基于它们显示产品.父组件将此输入设置为其产品列表.

实施迅速，但关注点比#1更清晰.

Quickly implemented, but much cleaner separation of concerns than #1.

• 实施@Injectable StateService .它具有a)​​一个带有产品列表的 BehaviorSubject< Product []> ，b)一种方法 addProduct(product:Product)将产品添加到当前值并发出它的 BehaviorSubject .
• 每个组件都使用该服务( constructor(stateService:StateService)).当用户选择产品时，组件将调用 this.stateService.addProduct(product).
• 显示产品的组件会监听该服务的产品列表中的更改: this.stateService.products.subscribe(products => this.products =产品)并相应地显示产品.

• Implement an @Injectable StateService. It has a) a BehaviorSubject<Product[]> with a list of products, b) a method addProduct(product: Product) that adds a product to the current value of the BehaviorSubject and emits it.
• Each component uses that service (constructor(stateService: StateService)). When the user picks a product, the component calls this.stateService.addProduct(product).
• Components that display products listen to changes in the service's product list: this.stateService.products.subscribe(products => this.products = products) and display the products accordingly.

使用诸如NGRX或Redux之类的东西来为您管理状态.

Use something like NGRX or Redux that takes care of state management for you.

这篇关于什么是更好的方法，以及如何实现将对象从一个嵌套组件发送到另一个嵌套组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！