Angular ContentChildren 获取指令输入和 TemplateRef

Question

我正在尝试获取 ng-template 和 input 参数的 TemplateRef。
应用程序组件.html:

<my-parent>
    <ng-template my-directive title="Title1" let-dataItem="dataItem">
        <div>{{dataItem|json}}</div>
    </ng-template>
</my-parent>

问题是我只能获取 TemplateRef (标题未定义):
my-parent.html:

<div *ngFor="let detail of details" [title]="detail.title"> //!!! detail.title is undefined
  <ng-container *ngTemplateOutlet="detail;context:{dataItem: dataItem}"></ng-container>
</div>

我的 parent .ts

@ContentChildren(MyDirective, { read: TemplateRef }) details: QueryList<MyDirective>;

或者我可以获得输入参数:
我的 parent .ts

@ContentChildren(MyDirective) details: QueryList<MyDirective>;   

//in html detail.title is defined, but detail is not template and I get exception in line 
<ng-container *ngTemplateOutlet="detail;context:{dataItem: dataItem}"></ng-container>

异常(exception):

TypeError: templateRef.createEmbeddedView is not a function

我想我需要这个版本的 ContentChildren:

@ContentChildren(MyDirective, { read: TemplateRef }) details: QueryList<MyDirective>;

但是如何获取 MyDirective 输入参数(在本例中为 title)？

我知道我可以同时使用:

@ContentChildren(MyDirective, { read: TemplateRef }) detailsRefs: QueryList<MyDirective>;
@ContentChildren(MyDirective) detailsInputs: QueryList<MyDirective>;

然后将其合并到新数组中:

public ngAfterViewInit(): void
{
  const refs = this.detailsRefs.toArray();
  const inputs = this.detailsInputs.toArray();
  for (let i = 0; i < inputs.length; i++)
    this.details.push({templateRef: refs[i], inputs: inputs[i]});
}

但是肯定有更好的方法。

Answer 1

可以使用 DI 来完成:

@Directive({
  selector: '[my-directive]'
})
export class MyDirective  {
  @Input() title: string;

  constructor(public templateRef: TemplateRef<any>) {}
}

现在应该很容易理解我们可以利用前面的指令，例如:

parent.component.ts

@ContentChildren(MyDirective) details: QueryList<MyDirective>;

parent.component.html

<ng-container *ngTemplateOutlet="detail.templateRef
                                       ^^^^^^^^^^^^^

<强> Stackblitz Example