Angular 8 - 如何将数据从 1 个组件导出到 2，然后到 3答案

【问题标题】：Angular 8 - How to export data from 1 component to 2 and then to 3Angular 8 - 如何将数据从 1 个组件导出到 2，然后到 3
【发布时间】：2019-11-14 00:05:58
【问题描述】：

如何将数据从1个组件导出到2再到3？

我在product-list.component.ts 组件中有一个数据对象：

    export class ProduktListComponent implements OnInit {
        productList = {};

        constructor(){}
        ngOnInit() {}

        getProdukt(){
        // ..
        this.productList= data; // this is an object
        }
    }

包含在product.component.html：

        <!--  code  -->
        <app-product-list [hidden]='!hideList'></app-product-list>
        <app-edit-product [hidden]='!hideEditt'></app-edit-product>

如何从app-product-list组件向app-edit-product传输数据？所以从app-product-list 组件将数据传递给app-edit-product

非常感谢您的帮助

【问题讨论】：

TourOfHeroes 是必经之路。

标签： javascript angular typescript ecmascript-6 angular8

【解决方案1】：

有几种不同的方法可以做到这一点..

最快的方法是使用BehaviorSubject，您可以使用它来设置和获取数据……

一个简单的实现是

创建一个产品服务product.service.ts在这个服务里面你需要创建一个behaviorSubject并创建一个set方法

product.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductService
  productListSource = new BehaviorSubject<any>(null); // creates the BehaviorSubject

  // You will use this method to store the data
  setProductList(data: any) {
     this.productListSource.next(data)
  }
}

那么你想做的就是在你的product-list.component

product-list.component.ts

import { ProductService } from '...';

// ...

constructor(
  private _product: ProductService
) {} 

getProduct() {
  this.productList = data;
  this._product.setProductList(this.productList);
}

那么无论您想从哪里获取此信息，都可以执行以下操作

组件

import { ProductService } ...

// ...

constructor(
  private _product: ProductService
) {}

getProducts() {
  this._product.productListSource.subscribe(data => {
    // do stuff here
  })
}

这样，您可以在应用中的任何位置使用 productList 数据，并且不会像使用 @Input() @Output() 方法那样卡在产品组件中

现在，如果您计划大量更新和操作这些数据并从几个不同的组件中使用它，您应该考虑使用@ngrx/store。你可以在这里了解更多信息angular ngrx a clean and clear introduction

【讨论】：

【解决方案2】：

您所要做的就是创建一个服务，使用BehaviorSubject 并将其注入到两个组件中，将输入值分配给服务设置器并在另一个组件中以可观察的方式访问它。

export class EditProductComponent implements OnInit {
  list = []
  constructor(private storeService: StoreService) {}

  ngOnInit(){
    this.storeService.list$.subscribe(list => this.list = list)
  }
}

export class ProductListComponent implements OnInit {
  list = [1, 2, 3, 4, 5, 5]

  constructor(private storeService: StoreService) {}
  ngOnInit(){
    this.storeService.list = this.list
  }
}


@Injectable({
  providedIn: 'root',
})
export class StoreService {
  private listSoruce = new BehaviorSubject<any>(null);
  public list$ = this.listSoruce.asObservable();

  set list(v){ this.listSoruce.next(v)}
}

【讨论】：