Angular 4从另一个组件调用变量不更新值？

productFilterComponent.ts

import {Component, OnInit} from '@angular/core';
import {ProductFilterService} from '../../services/product_filter.service';
import {ProductService} from "../../services/products.service";
import {NormalproductfilterComponent} from "./normalproductfilter/normalproductfilter.component";
import * as _ from "lodash";

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

  brands: any;
  products: any;
  filter_products: any;

  filtered_result = [];
  selected_brands = [];
  Data: any = [];

  color: any[] = ["red", "blue", "green", "orange", "grey", "yellow", "gold"];

  constructor(private _products: ProductService, private _productBrands: ProductFilterService, private normalProduct: NormalproductfilterComponent) {
  }

  getAllBrands() {
    this._productBrands
      .getAllBrands()
      .subscribe(brands => {
        this.brands = brands.Data;

        this.brands.forEach(singleRecord => {
          if (singleRecord.parent == 0) {
            this.Data[singleRecord.name] = singleRecord.id;
          }
        })
      })
  }

  getAllProducts() {
    this._products
      .getAllProducts()
      .subscribe(products => {
        this.products = products.Data;
        console.log(this.products);
      });
  }


  // Getting Selected Games and Count
  getSelected(val, event) {
    var index = this.selected_brands.indexOf(val);
    if (index === -1) {
      this.selected_brands.push(val);
    } else {
      this.selected_brands.splice(index, 1);
    }
    console.log(this.selected_brands);
    for (let temp of this.products) {
      if (this.selected_brands != '' || temp != 'undefined') {
        for (let temp2 of this.selected_brands) {
          this.filter_products = _.filter(temp.categories, {'id': temp2});
          if (this.filter_products != '') {

            var indexofFilterProducts = this.filtered_result.indexOf(temp);
            if (indexofFilterProducts === -1) {
              this.filtered_result.push(temp);
            } else {
              this.filtered_result.splice(indexofFilterProducts, 1);
            }
          }
        }
      }
      else {
        this.filtered_result = this.products;
      }
    }

    this.normalProduct.products = this.filtered_result;
  }


  ngOnInit() {
    this.getAllBrands();
    this.getAllProducts();
    }
  }

这是我的产品过滤器文件我想更新另一个文件上的产品值 normalProductFilter.ts

import {Component, Injectable, OnInit, Output, EventEmitter} from '@angular/core';
import {ProductfilterComponent} from '../productfilter.component';
import {ProductService} from "../../../services/products.service";

@Component({
  selector: 'app-normalproductfilter',
  templateUrl: './normalproductfilter.component.html',
  styleUrls: ['./normalproductfilter.component.css']
})

@Injectable()
export class NormalproductfilterComponent implements OnInit {
  @Output() data: EventEmitter<any> = new EventEmitter();
  products: any;
  data:any;
  normal_products_image: any[] = ["prdct1", "prdct2", "prdct3", "prdct4", "prdct5", "prdct6", "prdct7", "prdct8", "prdct1", "prdct2", "prdct3", "prdct4",];

  constructor(private _normalProducts: ProductService) {
  }

  getAllProducts() {
    this._normalProducts
      .getAllProducts()
      .subscribe(products => {
        this.products = products.Data;
        console.log(this.products);
      });
  }
  ngOnInit() {
    this.getAllProducts();
  }
}

从'@angular/core'导入{Component，Injectable，OnInit，Output，EventEmitter}；
从“../productfilter.component”导入{ProductfilterComponent}；
从“../../../services/products.service”导入{ProductService}”；
@组成部分({
选择器：'app normalproductfilter'，
templateUrl:“./normalproductfilter.component.html”，
样式URL:['./normalproductfilter.component.css']
})
@可注射（）
导出类NormalproductfilterComponent在Init上实现{
@Output（）数据：EventEmitter=neweventemitter（）；
产品：任何；
资料：有；
正常产品图像：任意[]=[“prdct1”、“prdct2”、“prdct3”、“prdct4”、“prdct5”、“prdct6”、“prdct7”、“prdct8”、“prdct1”、“prdct2”、“prdct3”、“prdct4”]；
构造函数（私有产品：ProductService）{
}
getAllProducts（）{
这是我们的产品
.getAllProducts（）
.订阅（产品=>{
this.products=products.Data；
console.log（this.products）；
});
}
恩戈尼尼特（）{
这个.getAllProducts（）；
}
}

我想根据用户选择使用筛选器更改产品的值，我从函数中获取了值，但当我试图通过productFilter更新产品时，它不起作用。

创建一个新服务（在终端中键入

ng g service

）。在职期间：

products:any;
holdProducts(pProducts: any){
 this.products=pProducts;
}
retrieveProducts(){
 return this.products;
}

现在从要存储值的组件调用holdProducts（），将

products

作为参数传递。在要检索的组件中，调用retrieveProducts（）函数并将其存储在变量中

---

在第二个组件中检索之前，您可以设置一个标志或以某种方式检查该值是否已填充（或者可能将该逻辑合并到retrieveProducts（））

请提供更多解释，复制可能有用，您可以复制您的问题吗？我无法访问“产品”来自productFilterComponent.tsI中normalProductFilter.ts的变量。我不确定您是如何尝试这样做的，也没有直接在组件之间传输数据，但一种方法是使用变量创建一个服务，例如var。然后从NormalproductfilterComponent，填充var，然后将var的值检索到ProductFilterComponent中的产品我想访问normalFilter.ts中的产品，我想访问productFilter.ts中的产品，但它不起作用。感谢您的回复，但我已经使用服务获取了所有产品现在我想筛选我的产品我现在就筛选它我想使用products变量在我的网站上显示过滤后的产品，但我无法访问它。这是您的场景吗：您接受组件A中的产品，然后过滤组件B中的产品，然后在组件A中显示产品？确定，然后在过滤组件B中的产品后，调用holdProducts（）方法并在A中检索它。是否有任何原因不想这样做（例如，bec您不想在组件之间来回跳转）？我如何调用retrieveProducts（）方法。方法与在B中的方法相同。要从服务访问方法，需要将服务“注入”到组件中。然后，您可以在组件内部使用属于服务的方法。例如，如果您有一个名为service1的服务，其中包含一个方法method1，那么在您将该服务注入组件的构造函数之后，您只需将该方法调用为：service1.method1（）