将数据传递到组件angular2

Question

Trying to pass data to a child component, I can attach the property into the template, but cant seem to access the id inside the class of the component. Any ideas?

---PARENT---

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

}

Answer 1

You could try to use @Input for the id property:

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

  (...)
}

but it should work with the inputs attribute and you should have access to the value in the ngOnInit hook method. Are you sure that the provided expression product.id returns something defined?

See this plunkr: https://plnkr.co/edit/aG4TdHbAls3cu04AAt64?p=preview .