創建沒有包裝標簽的角度組件

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>

結果是一個錯誤：

無法在“節點”上執行“ 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 鏈接

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>