如何解决可重复使用的组件
我正尝试创建自己的选择组件
所以最终结果将是这样
例如在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 举报,一经查实,本站将立刻删除。