创建一个没有包装标签的角度组件

Question

我想生成一个没有包装标签的组件。我阅读了所有类似的 SO 问题（例如 SO1、SO2、SO3），但没有找到合适的解决方案。

我现有的简化组件（toggle-button.component.ts）：

import {Component} from "@angular/core";

@Component({
    selector: "toggle-button, [toggleButton]",
    template: `<button type="button" class="btn btn-primary">{{ label }}</button>`
})

export class ToggleButtonComponent {

    @Input()
    public label: string;
}

我要创建的第二个组件（select-button.component.ts）：

import {Component} from "@angular/core";

@Component({
    selector: "select-button",
    template: `
    <div class="btn-group" role="group">
        <ng-container *ngFor="let item of items">
             <ng-container toggleButton [label]="item.label"></ng-container>
        </ng-container>
    </div>
    `
})

export class SelectButtonComponent {

    @Input()
    public items: {label: string; value: any;};
}

我的app.component.html

<select-button [items]="items"></select-button>

结果是错误：

在 'Node' 上执行 'appendChild' 失败：此节点类型不支持此方法。

我想要实现的是这样的 HTML 结构：

<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">12 H</button>
    <button type="button" class="btn btn-primary">24 H</button>
</div>

代替：

<div class="btn-group" role="group">
    <toggle-button>
        <button type="button" class="btn btn-primary">12 H</button>
    </toggle-button>
    <toggle-button>
        <button type="button" class="btn btn-primary">24 H</button>
    </toggle-button>
</div>

Stackblitz link

Answer 1

最简单的方法是避免toggle-button.component.ts，直接在select-button.component html中插入标签，例如：

 <ng-container *ngFor="let item of items">
         <button type="button" class="btn btn-primary">{{item.label}}</button>
    </ng-container>
</div>