在Angular 2中編寫可擴展組件

Question

我目前使用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; 
    // ... 
} 

我想知道如何修改此設計，以便用戶可以擴展Suggestion並編寫自己的相應建議組件。

我認爲像

<basic-suggestion *ng-if="suggestion.type == 'basic'"></basic-suggestion> 
<icon-suggestion *ng-if="suggestion.type == 'icon'"></icon-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> 

我有一個新的suggestion組件，看起來有點像這樣：

@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; 
    // ... 
} 

現在有點更好了，因爲用戶現在獲得了開箱即用功能/鍵盤控制/鼠標控制。但這仍然不理想。我不知何故喜歡模板根據suggestion的實際子類自動確定要使用的適當組件。我想我可以在每個組件中定義一個方法，如getTemplate()，但這可能不是一個非常Angular式的方法。