用另一个结构指令包装 Angular ngFor 指令答案

【问题标题】：Wrap Angular ngFor directive with another structural directive用另一个结构指令包装 Angular ngFor 指令
【发布时间】：2018-06-05 07:04:21
【问题描述】：

我的 AppComponent 的模板（在 AppModule 中引导）是

<div *myDir="let item of mySource">
  My Directive #{{item}}
</div>

其中mySource 是具有list 属性的对象

mySource = { list: [1, 2, 3, 4, 5] };

所以，用 ngFor (*ngFor="let item of mySource.list") 替换 myDir 会给我

我的指令 #1
我的指令 #2
我的指令 #3
我的指令 #4
我的指令 #5

我正在尝试将myDir 与myComponent 成对实现，以在ngFor Angular 核心指令上提供模板化包装器，以便能够传递mySource（而不是mySource.list）并获得相同的结果.当然，最终的目标要复杂得多，但我需要用最小的例子来解决这个任务……做了什么？

my.directive.ts

import { MyComponent } from './my.component';

@Directive({ selector: '[myDir][myDirOf]' })
export class MyDirective {
  private source;
  constructor(/* ... */) { }
  @Input() set myDirOf(source) {
    this.source = source;
  }
  ngOnInit() {
    // dynamic wrapping with MyComponent
    const templateView = this.templateRef.createEmbeddedView({});
    const compFactory = this.resolver.resolveComponentFactory(MyComponent);
    const componentRef = this.viewContainer.createComponent(compFactory, null, this.viewContainer.injector, [templateView.rootNodes]);
    // passing MyDir params to Mycomponent's instance
    componentRef.instance.source = this.source;
    componentRef.instance.template = this.templateRef;
  }
}

my.component.ts

@Component({
  selector: 'app-my',
  template: `
<div *ngFor="let item of source.list">
  <ng-template
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{
      item: item
    }">
  </ng-template>
</div>`
})
export class MyComponent implements OnInit {
  source;
  template;
  constructor() { }
}

问题是我无法将item 传递回主机组件的模板，所以目前我只得到包含“我的指令#”的 5 行相同的行，而{{item}} 不起作用。 MyComponent 的ng-template 似乎有问题。它接受template，但不会通过item。

我根据我目前的情况创建了一个可编辑的DEMO。另外，这是我需要的简单图表：

【问题讨论】：

标签： angular angular2-directives angular-directive

【解决方案1】：

使用$implicit 将数据传递给item

my.component.html

<div *ngFor="let item of source.list">
  <ng-template
    [ngTemplateOutlet]="template"
    [ngTemplateOutletContext]="{
      $implicit: item
    }">
  </ng-template>

</div>

你的模板

<div *myDir="let item of mySource">
  My Directive #{{item}}
</div>

等价于

<ng-template myDir let-item [myDirOf]="mySource">
  <div>
    My Directive #{{item}}
  </div>
</ng-template>

但如果模板变量 (let-item) 没有值，则默认采用$implicit

<ng-template myDir let-item="$implicit" [myDirOf]="mySource">
  <div>
    My Directive #{{item}}
  </div>
</ng-template>

DEMO

另见

【讨论】：