javascript - 在 ionic 2 中使用模板重写实现 angular 2 可重用性

我有一些 Angular 2 组件，在网页应用中运行良好。

所以，我想在一个 Ionic 2 应用中重用其中的一些，但不想重写东西。

Ionic 有特殊的指令，例如：列表。我希望能够通过在组件上“添加” Ionic 指令来重用我的组件。

离子语法：

<ion-list>
    <ion-item *ngFor="let product of products">
        {{product.name}}
    </ion-item>
</ion-list>

Angular 组件示例：

*主 Ionic 页面：

@Component({
  template: `
    <ion-header>
        <ion-navbar>
            <button menuToggle>
                <ion-icon name="menu"></ion-icon> 
            </button>
            <ion-title>Products</ion-title>
        </ion-navbar>
    </ion-header>    
    <ion-content padding>
        <product-list [products]="products"></product-list>
    </ion-content>
  `,
  directives: [ProductListComponent],
  providers: [ProductService]
})
export class ProductsPage implements OnInit{

  products;

  constructor(
      private navCtrl: NavController, 
      private productService:ProductService) {
  }

  ngOnInit() {
    this.productService.all().subscribe(data => {
      this.products = data;
    });
  }
}

产品列表：

@Component({
  selector: 'product-list',
  template: `
    <ul>
      <li *ngFor="let product of products">
        <product-list-element [product]="product"></product-list-element>
      </li>
    </ul>
  `,
  directives: [ProductListElementComponent]
})
export class ProductListComponent {

  @Input() products;

}

列表中的一个元素

@Component({
  selector: 'product-list-element',
  template: `
    <div>
        <h3>{{product.name}}</h3>
    </div>
  `
})
export class ProductListElementComponent {

  @Input() product;

}

在这个例子中，没有太多逻辑，所以重写模板是可以的，但在实际情况下...

我不知道该如何处理这个，我是 Angular 2 新手。

我认为答案的开端是少隐藏一些东西，多展示模板的内容，但也许有人已经做过这件事了。

可能像这样：

<ion-list>
    <ion-item *ngFor="let product of products">
        <ion-icon name="leaf" item-left></ion-icon>
        <product-list-element [product]="product">
            <product-title [title]="product.title"></product-title>
        </product-list-element>
    </ion-item>
</ion-list>

提前谢谢你 :)