あるコンポーネントから別のコンポーネントへの変数へのアクセス

Question

Imはいくつかの角度のあるプロジェクトを実行しようとしていますが、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() 
} 
} 

はどうすればProductDetailComponentでactualProduct変数を取得することができ、またはどのように私はすべての製品の配列を得ることができますか？ productComponentで "@Input（）actualProduct：Product"を使用しようとしましたが、実際には動作しません。 ありがとうございます。

Answer 1

これは、これらのコンポーネントが互いに関連していることと強く関連しています。

親子関係がある場合は、@Inputプロパティを使って、子コンポーネントに情報を渡し、@Outputプロパティによって親内の子イベントに耳を傾けることができます。

（例えばルーティングコンポーネント）が存在doesntの構成要素間のこのような関係であれば、次に最も一般的なオプションは、コンポーネント間の情報/イベントフローを管理サービスを作成することです。 the docs