Question

给出一个组件，我希望将渲染的子元素包装在其中。

在angular2中怎么可能？

例如，我具有以下组件：

export class InnerTestComponent implements OnInit {
  @ContentChildren('link') contents: QueryList<ElementRef>;
}

和此模板：

<div>
  <h3>Children test: {{ contents.length }} to render</h3>
  <div *ngFor="let child of contents">
    <ng-container *ngTemplateOutlet="someTemplateName; context: {child: child}">
    </ng-container>
  </div>
</div>

<ng-template #someTemplateName let-child="child">
  <h3>Child</h3>
  <div>
    {{ child }}
  </div>
</ng-template>

当我打电话时：

<templates-inner-test>
  <a #link href="#">Test1</a>
  <a #link href="#">Test2</a>
</templates-inner-test>

我得到：

<templates-inner-test>
<div>
  <h3>Children test: 2 to render</h3>
  <h3>Child</h3>
  <div>
    [object Object] <--- WRONG
  </div>
  </div><div>
  <h3>Child</h3>
  <div>
    [object Object] <--- WRONG
  </div>
  </div>
</div>
</templates-inner-test>

当我想要的是：

<h3>Child</h3>
<div>
  <a href="#">Test1</a>
</div>
<h3>Child</h3>
<div>
  <a href="#">Test2</a>
</div>

我很欣赏在ElementRef中渲染{{ ... }}只是在其上执行toString()，但是我应该怎么做？

我还要特别指出，在各地浮动以使用<ng-content select="child"></ng-content>平坦方案的解决方案是行不通的。那只是呈现一个空的<div>。

Answer 1

由于contents是列表ElementRef，并且您正在循环浏览，所以child是ElementRef，因此您可能需要使用child.nativeElement.innerHTML。

但是您肯定需要在此处使用DomSanitizer，您可以执行以下操作

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform  {
    constructor(private sanitizer:DomSanitizer){}
    transform(style) {
        return this.sanitizer.bypassSecurityTrustHtml(style);   
    }
}

那么您可以

<ng-template #someTemplateName let-child="child">
    <h3>Child</h3>
    <div [innerHTML]="child.nativeElement.innerHTML | safeHtml" ></div>
</ng-template>

如何在ng-template中呈现ContentChildren元素？

1 个答案: