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

问题描述：

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

我怎样才能actualProduct变量ProductDetailComponent，不然我怎么能得到的所有产品阵列？我尝试在productComponent中使用“@Input（）actualProduct：Product”，但它实际上不起作用。感谢您的帮助。

看看是否有部件之间的父子关系？或者他们呈现在不同的路线？ –

如果您的问题是关于Angular的，请添加角标签。 – 2017-06-20 07:43:25

答

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

如果有亲子关系，您可以通过使用@Input属性信息传递到子组件，并通过@Output性手段听父孩子的事件。

如果犯规存在组件之间这样的关系（例如路由组件），那么最普遍的选择是创建一个服务管理组件之间的信息和/事件流中。

对于furhter信息，请参加the docs

它们呈现在两条不同的路线中。我现在明白，为什么我不能使用@Input（），因为我尝试过。创建服务只是为了传递一个数组吗？因为这实际上是我所需要的。 – Shrike

是的，你需要在服务中封装该数组，并提供更新，重置和获取它的函数。 Check this section https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service –

谢谢！我会尽力做到这一点;） – Shrike

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

相关推荐