gpt4 book ai didi

angular - ng-content 选择绑定(bind)变量

转载 作者:太空狗 更新时间:2023-10-29 16:56:58 25 4
gpt4 key购买 nike

我正在尝试使用 angular 2 创建一个表单生成器。一个非常基本的示例如下:

this.fields = [{name: 'Name', type: 'text'}, {name: 'Age', type: 'number'}];

但我也想支持自定义元素,例如:

this.fields = [
{name: 'Name', type: text},
{name: 'Age', type: 'custom', customid: 'Ctl1'},
{name: 'Whatever', type: 'custom', customid: 'Ctl2'}
];
// template:
<super-form [fields]="fields">
<Ctl1><input type="number" ...><Ctl1>
<Ctl2><whaterver-control ...><Ctl2>
</super-form>

在我的表单构建器组件中,我有类似的东西:

<div *ngFor="let f of fields">
<div [ngSwitch]="f.type">
<span *ngSwitchWhen="'custom'">
<ng-content select="f.customid"></ng-content>
</span>
</div>
</div>

但考虑到我在这里,这显然行不通。这是 ng2 的限制吗?如果是这样,我想我可以硬编码说出 5 个可选内容元素并检查它们是否已指定并且没有动态选择,但这是一个 hack。

干杯

最佳答案

我知道这是一个老问题,但这是我在搜索此功能时首先到达的地方之一,因此我将添加我是如何解决它的。

ngContent 仅用于静态投影,因此您不能使用它进行任何绑定(bind)。如果您需要在投影内容中进行绑定(bind),您可以使用 ngTemplateOutlet 和 ngOutletContext。

使用示例:

<my-component>
<template let-item="item">
<h1>{{item?.label}}</h1> - <span>{{item?.id}}</span>
</template>
</my-component>

在 MyComponent 中,您可以使用 ContentChild 访问该模板:

@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

然后在组件的模板中将其传递给 ngTemplateOutlet,如下所示:

<div *ngFor="let item of list">
<template [ngTemplateOutlet]="templateVariable" [ngOutletContext]="{item: item}"></template>
</div>

ngOutletContext 是可选的,但它允许您创建将在模板中绑定(bind)到的对象。请注意,我在上下文对象中创建了一个属性 item。这与我在此处放置在模板上的名称相匹配:let-item="item"

现在 my-component 的消费者可以传入用于列表中每个项目的模板。

信用:这answer引导我走向正确的方向。

关于angular - ng-content 选择绑定(bind)变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37225722/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com