0

我被困在关于 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 类，这里不需要，但它当然有一个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属性。

你们有什么想法吗？

4

1 回答 1

0

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

开关按钮组件：

<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>

应用组件：

<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>

图像组件：

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

...

@Input()
item: any;

这是演示这一点的 Stackblitz 示例。

希望这可以帮助。

于 2018-10-18T15:50:17.337 回答