可重复使用的组件

问题描述

我正尝试创建自己的选择组件

所以最终结果将是这样

例如在app.components.html中

<div>
    <app-my-select [(ngModel)]="val">
        <app-my-option value="1" >one</app-my-option>
        <app-my-option value="2" >two</app-my-option>
        <app-my-option value="3" >three</app-my-option>
        <app-my-option value="4" >four</app-my-option>
    </app-my-select>
</div>

在my-select.component.html

中

<input (click)="openPanel()" class="select-value-container" readonly (keydown)="keyDown($event.key)"
       type="text" (blur)="onTouched()" (input)="onInputChange(origin.value)" [disabled]="disabled" [value]="options[index]" #origin>
    
<ng-template #panelTemplate>
  <div class="drop-down">
    <ng-container
      [ngTemplateOutlet]="myOptionTemplate"
      [ngTemplateOutletContext]="{optionSelected = 'optionSelected'}">
    </ng-container>
  </div>
</ng-template>

->我使用ng-template进行选择下拉菜单，因为我想将其传递给CDK覆盖并且效果很好

my-select.component.ts

...
  @ContentChild(NgOptionTemplateDirective) myOptionTemplate: TemplateRef<any>;
...

my-option.component.html

<ng-template ng-option-tmp let-optionSelected>
    <ng-content></ng-content>
</ng-template>

问题是我如何在选择组件中投影我的选项模板

我应该在“ ngTemplateOutlet”指令中写的另一种方式

最后一个问题是，如果使用'@ContentChildren'，我如何在my-select组件中获取所有my-option模板的引用

更新的问题：

如何获取对选项模板的引用作为TemplateRef的QueryList。
因为现在我可以引用它们作为MyOptionComponent的QueryList

我还有另一个建议，那就是在my-option html内使用div而不是ng-template，因此我只能使用ng-content而不是ng-template-outlet

但是新的问题将是如何将optionSelected事件传递给父组件，我的意思是我选择的组件而不使用ng-template

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）