Angular 2 ngSwitch 指令，内容相同

Question

我有一个 ngSwitch 可以将指令更改为我需要的。每个案例中都有完全相同的代码（大约 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 个@Inputs 并且需要一个大型服务来在父级和所有其他姐妹和兄弟之间进行通信组件）

Answer 1

更新Angular5

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

Answer 2

我知道问题已经得到解答，但还有另一种方法。

创建一个组件让我们说 app-component 使用以下模板：

<ng-template>
 Same content, many divs, many ngFor..
</ng-template>

创建一个通用指令让我们说 masterDirective 可以有条件地应用其他指令到元素，

然后这样配置

<app-component [masterdirective]="i+1">

Angular 2 ngSwitch 指令，内容相同

Angular 2 ngSwitch directive, same content

angular2-directives

angular