Angular 2 ngSwitch 指令，内容相同

Question

我有一个 ngSwitch 可以将指令更改为我需要的。每个case里面都有完全相同的代码(大约100行)。

<div [ngSwitch]="i + 1">
  <div *ngSwitchCase="1" directive1> Same content, many divs, many ngFor.. </div>
  <div *ngSwitchCase="2" directive2> Same content, many divs, many ngFor.. </div>
  <div *ngSwitchCase="3" directive3> Same content, many divs, many ngFor.. </div>                    
</div>

到目前为止工作正常，但我有许多未使用的代码，并且必须在所有情况下更改简单的事情(目前有 10 个)。

有没有办法在案例中使用相同的内容或将指令定义切换为更舒适的方式？

我尝试将内容导出到自定义组件并将其导入其中，但这会导致很多问题(我有大约 50 个 @Input，并且需要一个大型服务来在父组件和所有其他兄弟组件之间进行通信)

Answer 1

更新 Angular 5

ngOutletContext 已重命名为 ngTemplateOutletContext

另请参阅https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

<ng-template #content let-items let-idx="index">
 Same content, many divs, many ngFor..
</ng-template>

<div [ngSwitch]="i + 1">
  <div *ngSwitchCase="1" directive1><ng-container *ngTemplateOutlet="content; context: {$implicit: myData, index: i}"></ng-container></div>
  <div *ngSwitchCase="2" directive2><ng-container *ngTemplateOutlet="content; context: {$implicit: myData, index: i}"></ng-container></div>
  <div *ngSwitchCase="3" directive3><ng-container *ngTemplateOutlet="content; context: {$implicit: myData, index: i}"></ng-container></div>                    
</div>

另请参阅https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html