上下文
我正在为复选框编写自定义Angular组件.该组件呈现复选框标记以及标签标记.复选框的"id"属性和标签的"for"属性都设置为组件的id属性(组件的属性@Input),以确保单击标签将切换复选框.该模板的简化版本如下所示:
<div class="checkbox">
<input type="checkbox" [id]="id" />
<label [for]="id"><ng-content></ng-content></label>
</div>
问题
当我在我的组件(例如<my-checkbox id="hello">Check me</my-checkbox>)上设置"id"prop时,会在DOM中的组件包装器标签上自动设置"id"属性.这导致DOM中出现重复的ID,因为我已经在组件内的复选框上设置了"id"属性.这是无效的,并且会破坏浏览器的默认切换点击标签行为.DOM输出是:
<my-checkbox id=“my-checkbox” ng-reflect-id=“my-checkbox” ng-reflect-checked="true">
<div ng-reflect-ng-class="[object Object]" class="checkbox">
<input class="checkbox__element" type="checkbox" name="fire_missiles" ng-reflect-id=“my-checkbox” id=“my-checkbox” value=“fire_missiles” ng-reflect-checked="true">
<label class="checkbox__label" ng-reflect-html-for=“my-checkbox” for=“my-checkbox”>
Fire missiles?
</label>
</div>
</my-checkbox>
有没有办法要么a)摆脱垃圾容器标签或b)停止自动反映"id"道具作为属性？
注意:使用应用于div之类的属性选择器没有帮助,它只是将额外的"id"从<my-checkbox />div 移动到div.
我想做的事
我想创建一个可重用的Angular 2按钮组件,它可以呈现为<a />标签或<input />标签,具体取决于所调用组件的输入type.我希望按钮组件接受将呈现为按钮标签的内容子项.
为了说明:一个Angular模板,它调用我的button组件,如下所示:<button>Hello</button>应该像<a>Hello</a>在DOM中一样呈现.但是,如果type="submit"设置了属性(例如<button type="submit>Hello</button>),那么DOM中的输出应该是<input type="submit">Hello</input>.
为了进一步澄清,如果我使用React,我可以用以下方法创建[这个组件的过度简化版本]:
const Button = ({ type, children }) =>
type === "submit"
? <input type="submit">{children}</input>
: <a>{children}</a>
我被困在哪里
创建显示子项使用内容的Angular组件<ng-content />相对简单.但是,我还无法在动态选择的标记内渲染这些子项- <a />或者<input />取决于type属性的值.
我试过的
我最初尝试<ng-content />在一个ngIf或ngSwitch指令中使用,但发现在任何给定的模板<ng-content />中最多只能出现一次(除非它用选择器限定).但是,我想输出所有内容子项,因此选择器没有帮助.
我一直在寻找对DynamicComponentLoader的引用,但这似乎已被弃用.
我已经看过ContentChildren装饰器,它允许我的按钮组件访问传递给它的子内容,但是我不知道如何将这些子节点并将它们注入到我的组件模板中.