angularjs2 组件

ts文件中
// 新建Product 类
class Product{
 constructor(public sku:string,
  public  name:string,
  public imageUrl:string,
  public department:string[],
  public price:number){}
}
@Component({
  selector:"app-product",
  template:`
  <div class="app-product">
  <span>{{product.name}}</span>
  <span>{{product.sku}}</span>
  </div>
  `
})
export class ProductComponent implements OnInit {
 
  product:Product;
  constructor(){
    this.product=new Product('MYSHOES',
        'Black Running Shoes',
        '/resources/images/products/black-shoes.jpg',
        ['Men', 'Shoes', 'Running Shoes'],
        109.99)
  }

  ngOnInit() {
  }

}

//组件输入
//方法1
@Component({
  selector:'app-product',
  Input:['name','age']
})
class myComponent{
   name:string;
   age:number;
}
//方法2
@Component({
selector:'app-product'
})
class myComponent{
   @Input() name:string,
   @Input() age:number
}
<app-product [name]='name' [age]='age'></app-product>