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

Question

关于 Angular 内容投影，我遇到了困难。 我想将一个组件 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 class，这里不需要，当然它有一个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-component）的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 示例。

希望对您有所帮助。