将变量从一个组件访问到另一个组件

Question

我试图做一些有角度的项目，但我没有进入Web开发。它简单的商店。
我想通过Play Framework从sqlite获取一些信息。它正在工作。

在我收到它的角度和显示之后。它也在工作。服务：

@Injectable()
export class ProductService {
constructor(private http: Http) { }
getProducts() {
  const headers: Headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Content-Type', 'application/json');
  const options = new RequestOptions({headers: headers});
  return this.http.get('http://localhost:9900/', options)
  .map(response => <Product[]>response.json());
 } 
}

当我拿走所有产品时，放置：

export class ProductComponent implements OnInit {
public products: Product[];
actualProduct: Product;
productForm: FormGroup;
public quantity: number;
private activeFilter: string = "reset";
public allFilters: Array<string>;

constructor(private productService: ProductService,private router:Router) {
  this.allFilters =  ['ocean', 'river', 'aquarium', 'reset'];
}
ngOnInit() {
  this.productService.getProducts().subscribe(data => this.products = data);
}
public getActualProduct() {
  return this.actualProduct;
}
clickedProduct(product) {
  this.actualProduct = product;
  let link = ['/detail', product.prodId];
  this.router.navigate(link);
}
public setFilter(filter: string) {
 this.activeFilter = filter;
 }
}

所以我的问题：如何访问其他组件中的阵列产品？因为现在，当我单击带有功能按钮时，单击产品它的工作完美。它显示在控制台对象产品中。但是当我尝试使用产品在其他组件中显示产品详细信息时，我失败了：

 export class ProductDetailComponent implements OnInit {
 selectedProduct: Product;
 products: Product[];
 quantity: number;
 constructor(
 private productService:ProductService,
 private productComponent: ProductComponent,
 private route:ActivatedRoute,
 private location:Location,
  // private cartStore: CartStore
 ) {  }
ngOnInit() {
    this.selectedProduct = this.productComponent.getActualProduct();
}
addToCart(product) {
  console.log(this.selectedProduct)
  console.log(product)
  //this.cartStore.addToCart(product, this.quantity || 1)
}
goBack() {
    this.location.back()
 }
}

如何在产品详细信息组件中获取实际产品变量，或者如何获取所有产品的数组？我尝试在产品组件中使用"@Input((实际产品：产品"，但它实际上不起作用。感谢您的帮助。

Answer 1

这与这些组件彼此相关的方式密切相关。

如果存在父子关系，则可以使用 @Input 属性将信息传递给子组件，并通过@Output属性侦听父组件中的子事件。

如果组件之间不存在这种关系(例如路由组件(，则最常见的选择是创建一个服务来管理组件之间的信息/事件流。

有关更多信息，请查看文档