Question

我对Angular Content Projection颇为棘手。我想将组件A投影到另一个组件B中，并在组件A上绑定一些属性。

例如，我有一个SwitchButton组件（有几种选择）。我希望该组件显示文本或图像。

为此，这是我的SwitchButtonComponent（HTML）：

<div class="container border rounded bg-white">
   <div class="row text-center">
      <div *ngFor="let it of items" class="col" style="cursor:pointer;">
         {{it}}
      </div>
   </div>
</div>

我省略了ts类，这里不需要，但是它当然具有 items 属性。我在另一个组件中使用该组件，如下所示：

<div>
   <switch-button [items]="['A','B','C']"></switch-button>
</div>

嗯，这很简单。很好。

现在，我的项目中有一个更复杂的对象，我想显示一个图像。它会给出：

<div>
   <switch-button [items]="[{path:'./img1.png'},{path:'./img2.png'}]">
       <img-component></img-component>
   </switch-button>
</div>

img-component 只是一个渲染图像并具有一个属性的简单组件：imgPath。

在SwitchButtonComponent中：

<div class="container border rounded bg-white">
   <div class="row text-center">
      <div *ngFor="let it of items" class="col" style="cursor:pointer;">
         <ng-content></ng-content>
      </div>
   </div>
</div>

在这里您可以看到我无法绑定投影组件（img组件）的imgPath属性。

你有一些想法吗？

Answer 1

我不知道是否可以使用ng-content。我使用<ng-container>解决了这个问题（如果您的要求还可以的话）：

SwitchButtonComponent ：

<div class="container border rounded bg-white">
  <div class="row text-center">
    <div *ngFor="let it of items" class="col" style="cursor:pointer;">
     <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: it }"></ng-container>
    </div>
  </div>
</div>

AppComponent ：

<div>
  <switch-button [items]="[{path:'./img1.png'},{path:'./img2.png'}]">
    <ng-template let-item>
      <img-component [item]="item"></img-component>
    </ng-template>
  </switch-button>
</div>

ImageComponent ：

<div>{{ item.path }}</div>

...

@Input()
item: any;

Here是Stackblitz示例，证明了这一点。

希望这会有所帮助。

Angular 2+内容投影和组件属性绑定

1 个答案: