Question

我试图用Angular 5实现一个select组件。它由select组件本身和option组件组成。它应该以这种方式使用：

<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()设置值。这很容易。我想以与SelectComponent中指定的<app-option/>用户相同的方式呈现值。一个选项应该能够包含任何内容（甚至是另一个组件，比如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获取ElementRef使用的被转换ng-content的{{1}}。

然后，发出的事件现在为对象提供值，并提供完整的app-option，以便将其注入订阅此事件的ElementRef。

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

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

1 个答案: