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 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>

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

1 个答案: