angular - 如何包装 Angular 组件并将 ng-template 从外部组件传递到内部组件
问题描述
我正在使用 Angular 5 并尝试将ng-select包装在自定义组件中。我的理由是封装它,以便在需要时可以轻松更换。如果有更好的方法来做到这一点,请告诉我。
我创建了一个自定义组件,我有各种 @Inputs() 依次传递给内部 ng-select。这一切都很好。
我的问题是如何正确地将 ng-select自定义模板传递给包装的 ng-select?
这是我到目前为止的一个例子,为了简单起见,我省略了一些输入。
这就是我调用传入自定义模板的包装器的方式:
<app-wrapper-select
[items]="cars"
[(selected)]="selectedCars">
<ng-template #labelTemplate ng-label-tmp let-item="item">
<span class="ng-value-label">LABEL {{item.metadata.name}}</span>
<span class="ng-value-icon right" aria-hidden="true">×</span>
</ng-template>
<ng-template #optionTemplate ng-option-tmp let-item="item">
<span class="ng-value-label">OPTION {{item.metadata.name}}</span>
<span class="ng-value-icon right" aria-hidden="true">×</span>
</ng-template>
</app-wrapper-select>
在包装器组件中,我将模板声明如下:
@ContentChild('labelTemplate', { read: TemplateRef }) labelTemplate: TemplateRef<any>;
@ContentChild('optionTemplate', { read: TemplateRef }) optionTemplate: TemplateRef<any>;
这是包装器组件html:
<ng-select
[items]="items"
[(ngModel)]="selected">
<ng-template ng-label-tmp let-item="item">
<ng-container *ngTemplateOutlet="labelTemplate; context:{item: item}"></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<ng-container *ngTemplateOutlet="optionTemplate; context:{item: item}"></ng-container>
</ng-template>
</ng-select>
上面确实渲染了模板,但标签和选项的所有样式都丢失了,只是在白色背景上显示为文本。
我一定遗漏了一些东西,我怎样才能让样式正确渲染?
另一个问题是 ng-select 在每个标签上都有一个关闭按钮,可以将其从所选项目中删除,还有一个关联的 clear() 方法 - 但是当我在 ng-select 之外的模板中使用它时,它无法识别,例如
<ng-template #labelTemplate ng-label-tmp let-item="item" let-clear="clear">
<span class="ng-value-label">LABEL {{item.metadata.name}}</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</ng-template>
如何在 ng-select 之外的 ng-template 中使用 clear(),有什么方法可以获取对它的引用并调用它吗?
谢谢。
解决方案
好的,我得到了它的解决方案,以防有人像我一样感到困惑。在 IntelliJ 中,当模板输入变量是函数时,它无法识别它们并说它们不可调用。虽然它编译得很好。这也发生在 ngBootstrap 模态以及 close 和 dismiss 方法中。这是我使用的 ng-template 现在正在工作
<app-wrapper-select
[items]="cars"
[(selected)]="selectedCars">
<ng-template #labelTemplate ng-label-tmp let-item="item" let-clear="clear">
<span class="ng-value-label">{{item.metadata.name}}</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</ng-template>
<ng-template #optionTemplate ng-option-tmp let-item="item">
<span class="ng-value-label">{{item.metadata.name}}</span>
</ng-template>
</app-wrapper-select>
<ng-select
[items]="items"
[(ngModel)]="selected">
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<ng-container *ngTemplateOutlet="labelTemplate; context:{item: item, clear: clear}"></ng-container>
</ng-template>
<ng-template ng-option-tmp let-item="item">
<ng-container *ngTemplateOutlet="optionTemplate; context:{item: item}"></ng-container>
</ng-template>
</ng-select>
推荐阅读
- reactjs - 动态定义 TabPanel 内的组件(material-ui、react)
- python - GeoPandas - 空间连接 - 包含另一层的百分比
- ios - 在 SwiftUI 中,有没有办法扩展和收缩视图以在视图的扩展版本中显示隐藏的文本和按钮?
- c - 在 C 语言中使用正则表达式匹配字符串(忽略大小写敏感)
- android - Android Gradle 构建错误“AAPT2 aapt2-4.1.0-6503028-windows 守护进程 #0:链接期间出现意外错误,试图停止守护进程。”
- node.js - 如何使用本地 Mongo DB 运行 Ember 测试?
- asp.net-core - ASP.NET Core WEB API通过外部URL自连接“无法连接,因为目标机器主动拒绝”
- c++ - 如何在 Linux 上构建和运行 Unreal C++ 项目?
- apache - 运行 phpBB 3.3 的共享服务器上出现 500 个错误
- python - 缩放 x 轴 matplotlib