如何使用其他人不知道的组件（组成组件）？

Question

我想创建一个使用其他组件的通用组件，但通用组件没有直接引用此组件。

换句话说，假设一个 List 组件绘制 ListRow 组件的列表，但是使用 List 的组件想要使用特定列表行，例如 MyCustomListRow （扩展 ListRow ）。

这个 MyCustomListRow 有一个特定的html模板，那么，如何告诉 List 组件使用 MyCustomListRow 而不知道具体的列表行 MyCustomListRow

可在此处找到代码示例[http://plnkr.co/edit/GAsf0NGy5Dx7OC9lMGLD?p=preview]

想要的结果是MyCustomListRow的列表，类似于

• 这是MyCustomListRow :)
• 这是MyCustomListRow :)
• 这是MyCustomListRow :)

但是我得到了

• [object Object]
• [object Object]
• [object Object]

或代码修改很少

• 这是一个ListRow :(
• 这是一个ListRow :(
• 这是一个ListRow :(

列表

@Component({
    selector: 'list',
    properties: [
        'listRows: list-rows'
    ]
})

@View({
    template: `
      <ul>
          <li *ng-for="#item of listRows">
              <listRow >{{item}}</listRow>
              <input type="button" value="..." />
          </li>
      </ul>
    `,
    directives: [NgFor ] // , bind(ListRow).toFactory(ListBindingManager.ListRowFactory)
})


export class List {
    listRows: ListRow[];    

    constructor() {
        this.listRows = [];

    }
}

ListRow

@Component({
    selector: 'listRow '
})
@View({
    template: 'this is a ListRow  :( '
})

export class ListRow {
    constructor() {
    }

}

MyCustomListRow

@Component({
    selector: 'listRow'
})
    @View({
        template: 'this is MyCustomListRow  :)   '
})
export class MyCustomListRow extends ListRow {
    constructor() {
        super();
    }
}

App（使用列表）

@Component({
  selector: 'my-app',
  bindings: [ListBindingManager]
})
@View({
  template: `
    <list [list-rows]="myRows" >
    </list>
  `,
  directives: [CORE_DIRECTIVES, List]
})
export class App {
  myRows: MyCustomListRow[];
  constructor() {
    ListBindingManager.listRowBindings = MyCustomListRow;

    this.myRows = [];
    this.myRows.push(new MyCustomListRow());
    this.myRows.push(new MyCustomListRow());
    this.myRows.push(new MyCustomListRow());
  }
}