将数据传递给组件angular2

试图将数据传递给子组件，我可以将属性附加到模板中，但似乎无法访问组件类中的id。有任何想法吗？将数据传递给组件angular2

---家长---

<related-products [id]="product.id"></related-products>

--CHILD ---

import {Component, OnInit, Input} from 'angular2/core'; 
import {RouteParams, Router} from 'angular2/router'; 
import {ProductService} from '../products/product.service.js'; 

@Component({ 
    selector: 'related-products', 
    templateUrl: "wp-content/themes/f2/app/views/directives/related-products-template.html", 
    inputs: ['id'], 
    providers: [ProductService] 
}) 
export class RelatedProductsComponent implements OnInit { 

    products: any[]; 
    errorMessage: string; 
    id: number; 

    constructor(
    private _service: ProductService, 
    private _router: Router, 
    private _routeParams: RouteParams 
) {} 

    ngOnInit() { 

    console.log(this.id); 
    } 

}

来源

2016-04-26 user3355603

你可以尝试使用@Input为id属性：

export class RelatedProductsComponent implements OnInit { 
    products: any[]; 
    errorMessage: string; 
    @Input() // <------------ 
    id: number; 

    (...) 
}

但它应该与inputs属性一起使用，并且您应该有权访问ngOnInit钩子方法。你确定提供的表达式product.id返回定义的内容吗？

看到这个plunkr：https://plnkr.co/edit/aG4TdHbAls3cu04AAt64?p=preview。

来源

2016-04-26 13:08:38

我认为它的事实是，我正在做一个Ajax调用来获取数据，而这个inturn意味着数据还没有准备好在子组件中。我如何等待构建子组件，以便知道数据可用 – user3355603

您直接获得产品还是循环内的元素？ –

它的单个详细页面，所以我打电话，并获取数据，我有孩子组件（相关产品（需要从父组件（产品详细信息）的ID – user3355603

将数据传递给组件angular2

回答

相关问题