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

Question

我正在尝试做一些 angular 项目，但我不喜欢 Web 开发。它的简单商店。
我想通过 Play Framework 从 sqlite 获取一些信息。这是工作。

我收到后在angular显示。它也工作。服务：

@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;
 }
}

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

 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()
 }
}

如何获取 ProductDetailComponent 中的 actualProduct 变量，或者如何获取所有产品的数组？我尝试在 productComponent 中使用“@Input() actualProduct: Product”，但它实际上不起作用。感谢您的帮助。

Answer 1

这与这些组件相互关联的方式密切相关。

如果存在父子关系，可以通过@Input属性向子组件传递信息，在父组件中监听子事件通过 @Output 属性。

如果组件之间不存在这种关系（例如路由组件），那么最常见的选择是创建一个服务管理组件之间的 information/event 流。

更多信息请查看the docs

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

Access variable from one component into another

typescript

angular2-components

angular