Dart 在Angular 2中编写可扩展组件

我目前正在使用Angular2（Dart）创建一个可重用的搜索框组件，其中包括一个建议框

我遇到的问题是，我不知道如何通过支持更丰富的建议类型来扩展建议框，例如带有图标的建议、带有多行文本的建议、文本上不同的样式、动画等

目前，建议框HTML（精简）看起来有点像：

<div class="suggestion-box-container">
  <div class="suggestion" *ng-for="#suggestion of model.suggestions">
    {{ suggestion.text }}
  </div>
</div>

@Component(
  selector: 'suggestion-box'
)
@View(
  templateUrl: 'suggestion_box.html',
  directives: const [NgFor]
)
class SuggestionBox {
  final SuggestionModel model;
  // ...
}

class SuggestionModel {
  List<Suggestion> suggestions = [];
  // ...
}

class Suggestion {
  String text;
  // ...
}

@Component(
  selector: 'suggestion',
  properties: const ['suggestion: suggestion-instance']
)
@View(
  template: '''
<div (^click)="handleClick(suggestion)"
     (hover)="handleHover(suggestion)">
  <content></content>
</div>
'''
)
class SuggestionComponent {
  final SuggestionModel model;
  final Suggestion suggestion;
  // ...
}

当然，随着支持更多建议类型，这将很快失去控制，并且还需要将

（^hover）

和

（^click）

处理程序复制到每种建议类型。更糟糕的是，它需要修改原始库，而不仅仅是以模块化的方式使用它

这类事情有一个优雅的解决方案吗？或者，如果用户希望得到更丰富的建议，他们是否应该完全编写自己的建议框？我希望避免这种情况，因为我想在搜索框/建议框中加入一些辅助功能，用户不需要重写这些功能

编辑：根据冈特的回答，我设法将这一点改进了一点：

<suggestion-box>
  <div *ng-for="#suggestion in suggestions">
    <suggestion suggestion-instance="suggestion">
      <!-- Custom suggestion code goes here.
           The following is an example -->
      <img src="{{suggestion.iconSrc}}"></img> {{suggestion.text}}
    </suggestion>
  </div>
</suggestion>

---

这现在有点好了，因为用户现在可以直接访问/键盘控制/鼠标控制。但这仍然不理想。我希望模板能够根据

建议的实际子类

自动确定要使用的适当组件。我想我可以在每个组件中定义一个方法，比如

getTemplate（）

，但这可能不是一种非常有角度感的方法。

我还没有真正使用Angular2，但我认为至少有两种方法 -您应该能够扩展组件（只需创建一个派生类并专门化行为） -使用阴影DOM的

标记组合。我在这里找到了一些文档 -或者两者的结合

更新

3.2版提供了对扩展组件的支持。 诸如

@HostBinding（）

，

@HostListener（）

，

@ViewChild（）

，

@ContentChild（）

之类的注释将在子类上被识别，用于

OnInit

和其他回调的接口也将被识别

除了inheritanc之外，还有许多不同的方法可以使组件可定制。
您可以使用DynamicComponentLoader传递要由搜索框实例化的组件类型，
传递要在

位置显示的子项，

---

或者传递要由您的搜索组件动态添加的内容，可能还有其他组件。

您是否在不定义getTemplate（）的情况下找到了问题的解决方案方法？我想做一些类似的事情。有不同的方法使组件可自定义。您可以使用DynamicComponentLoader传递要由搜索框实例化的组件类型，传递要在

中显示的子级，或者传递要由搜索组件动态添加的

内容。

@Component(
  selector: 'suggestion',
  properties: const ['suggestion: suggestion-instance']
)
@View(
  template: '''
<div (^click)="handleClick(suggestion)"
     (hover)="handleHover(suggestion)">
  <content></content>
</div>
'''
)
class SuggestionComponent {
  final SuggestionModel model;
  final Suggestion suggestion;
  // ...
}