将数据传递给组件 angular2

Question

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

---父母---

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

--孩子--

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

您可以尝试将@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。