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

Question

如何将数据从 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

非常感谢您的帮助

Answer 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