Question

我试图做一些有角度的项目，但我不进入网络开发。它的简单商店。我想通过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;
 }
}

所以我的问题是：如何在其他组件中访问阵列产品？因为现在，当我点击按钮功能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属性将信息传递给子组件，并通过{{监听父组件中的子事件1}}属性。

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

有关更多信息，请查看the docs

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

1 个答案: