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

更新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

Angular 2 ngSwitch指令，内容相同

1 个答案: