从 ng-content 的孩子那里获取模板

Question

我正在尝试使用 Angular 5 实现一个选择组件。它由选择组件本身和选项组件组成。应该这样使用：

<app-select placeholder="Select smth">
  <app-option *ngFor="let option of options" [value]="option">
    <img src="option.iconLocation"> {{ option.name }}
  </app-option>
</app-select>

如果未设置该值，用户会看到占位符，否则用户应该看到他/她选择的选项的确切内容，例如在这种情况下图像和文本。那么，如何在SelectComponent 中访问和呈现所选选项的用户指定模板？

问题不在于我不能用@Output() 设置值。这是容易的部分。我想以与<app-option/> 中指定的SelectComponent 的用户相同的方式呈现该值。一个选项应该能够包含任何内容（甚至是另一个组件，比如CardComponent），并且在用户选择一个值之后，我想在SelectComponent 中显示他/她在选项中看到的所有内容。

在SelectComponent 的模板中我有类似

<div [ngSwitch]="isEmpty" (click)="pp.toggle()">
    <button *ngSwitchCase="true">
        {{ placeholder }}
    </button>
    <button *ngSwitchDefault>
        THIS SHOULD TURN INTO 
        <img src="option.iconLocation"> {{ option.name }} 
        OR ANYTHING ELSE USER SPECIFIED IN THE OPTION COMPONENT
    </button>
</div>
<popup #pp>
    <ng-content>HERE GOES THE USER'S TEMPLATE</ng-content>
</popup>

see an example。如何获取此 <strong>{{ index }}</strong> {{ option.name }} 部件并在按钮内呈现？

Answer 1

您可以使用 @Output decorator 和 EventEmitter 将值发送到顶级组件（在您的 OptionComponent 中使用它）。

当它改变时它会发出新的值。所以你可以在任何顶级组件中订阅它。

例如你的代码：

<app-select placeholder="Select smth">
  <app-option *ngFor="let option of options" 
              [value]="option" 
              (onOptionChanged)="onOptionChangedMethod($event)">
    <img src="option.iconLocation"> {{ option.name }}
  </app-option>
</app-select>

onOptionChangedMethod(...) 可以位于您的SelectComponent 或其他任何地方。

---

编辑：

我复制了你的例子，我想这是一个好的开始：https://stackblitz.com/edit/angular-sfqvqp

这就是你要找的吗？我使用@ViewChild 来获得app-option 使用的嵌入ng-content 的ElementRef。

然后，发出的事件现在给出一个具有该值的对象，以及完整的ElementRef，以便将其注入订阅此事件的SelectComponent。

注：我不知道它是否适用于直接传递给app-option 的组件（应该），但我建议你看看“angular 2 access ng-content within component”。