使用属性指令动态加载组件的Angular 4与DIV包装

Question

我正在尝试根据配置选项动态创建一些组件。更具体地说，我想拥有一些工具栏，其中可能包含不同的"工具栏项目"。

根据角度指南：https：//angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html我创建了专门的指令

@Directive({
    selector: '[mte-toolbar-item-host]'
})
export class ToolbarItemDirective {
    constructor(public viewContainerRef: ViewContainerRef) {
    }
}

将用于指示组件的"注入"点。

我有主要ToolbarComponent

@Component({
    selector: "mte-toolbar",
    templateUrl: "./toolbar.component.html",
    styleUrls: ["./toolbar.component.css"],
    providers: [ToolbarService]
})
export class ToolbarComponent implements AfterViewInit {
    toolbar: Toolbar;
    @ViewChild(ToolbarItemDirective)
    toolbarItemHost: ToolbarItemDirective;
    constructor(private toolbarService: ToolbarService, private componentFactoryResolver: ComponentFactoryResolver) {
    }
    ngAfterViewInit(): void {
        this.toolbar = new Toolbar(this.toolbarService.getToolbarItems());
        for (let i in this.toolbar.items) {
            let toolbarItem = this.toolbar.items[i];
            let toolbarItemFactory = this.componentFactoryResolver.resolveComponentFactory(toolbarItem.componentType);
            let componentRef = this.toolbarItemHost.viewContainerRef.createComponent(toolbarItemFactory);
            componentRef.instance.toolbarItem = toolbarItem;
        }
    }
}

使用适当的模板

<ul class="nav nav-pills">
    <li role="presentation" mte-toolbar-item-host></li>
</ul>

目前，toolbarService正在返回以下组件列表：

export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
    new GlyphToolbarItem(GlyphToolbarItemComponent, "example-component-id-1", null, "glyphicon-log-in"),
    new GlyphToolbarItem(GlyphToolbarItemComponent, "example-component-id-2", null, "glyphicon-floppy-remove"),
    new GlyphToolbarItem(GlyphToolbarItemComponent, "example-component-id-3", null, "glyphicon-log-in"),
    new GlyphToolbarItem(GlyphToolbarItemComponent, "example-component-id-4", null, "glyphicon-paste")
];
@Injectable()
export class ToolbarService {
    getToolbarItems(): ToolbarItem[] {
        return DEFAULT_TOOLBAR_ITEMS;
    }
}

GlyphToolbarItem：

export class GlyphToolbarItem extends ToolbarItem {
    glyphIcon: string;
    constructor(componentType: Type<any>, id: string, command: AbstractCommand, glyphIcon: string) {
        super(componentType, id, command);
        this.glyphIcon = glyphIcon;
    }
}

GlyphToolbarItemComponent：

@Component({
    selector: '[mte-glyph-toolbar-item]',
    templateUrl: './glyph-toolbar-item.component.html'
})
export class GlyphToolbarItemComponent {
     toolbarItem: ToolbarItem;
}

它的模板

<a class="btn btn-default btn-sm glyphicon {{toolbarItem.glyphIcon}}"></a>

我期望收到类似的东西：

<ul _ngcontent-c2="" class="nav nav-pills"><!---->
    <li role="presentation" mte-glyph-toolbar-item="" ng-version="4.0.3">
        <a class="btn btn-default btn-sm glyphicon glyphicon-log-in"></a>
    </li>
    <li role="presentation" mte-glyph-toolbar-item="" ng-version="4.0.3">
        <a class="btn btn-default btn-sm glyphicon glyphicon-floppy-remove"></a>
    </li>
    <li role="presentation" mte-glyph-toolbar-item="" ng-version="4.0.3">
        <a class="btn btn-default btn-sm glyphicon glyphicon-log-in"></a>
    </li>
    <li role="presentation" mte-glyph-toolbar-item="" ng-version="4.0.3">
        <a class="btn btn-default btn-sm glyphicon glyphicon-paste"></a>
    </li>
</ul>

，但是我已经收到了用<div>包装的动态组件：

<ul _ngcontent-c2="" class="nav nav-pills"><!---->
<div mte-glyph-toolbar-item="" ng-version="4.0.3">
    <a class="btn btn-default btn-sm glyphicon glyphicon-log-in"></a>
</div>
<div mte-glyph-toolbar-item="" ng-version="4.0.3">
    <a class="btn btn-default btn-sm glyphicon glyphicon-floppy-remove"></a>
</div>
<div mte-glyph-toolbar-item="" ng-version="4.0.3">
    <a class="btn btn-default btn-sm glyphicon glyphicon-log-in"></a>
</div>
<div mte-glyph-toolbar-item="" ng-version="4.0.3">
    <a class="btn btn-default btn-sm glyphicon glyphicon-paste"></a>
</div>

为什么我会收到用<div>而不是<li>元素包裹的动态组件(似乎完全忽略了(？这是实现此目标的正确方法吗？

Answer 1

我认为您必须要glyphtoolbaritemcomponent：

@Component({
    selector: 'li[mte-glyph-toolbar-item]',
    template: '<a class="btn btn-default btn-sm glyphicon {{toolbarItem.glyphIcon}}"></a>'
})
export class GlyphToolbarItemComponent {
  @HostBinding('attr.role') role ="presentation";
  toolbarItem: ToolbarItem;
}

并删除空的li 移动mte-toolbar-item-inost to ul> ng-container

<ul class="nav nav-pills">
  <ng-container mte-toolbar-item-host></ng-container>
</ul>

我也认为Angular不会喜欢您在Ngafterviewinit中创建这些组件

我创建了https://plnkr.co/edit/8cjlzooo1oh2cwydxbsn?p=info

Answer 2

您从中获取 ViewContainerRef元素的元素无关紧要。createComponent将添加一个兄弟姐妹，并使用动态创建的组件的选择器作为元素。因为默认情况下，选择器<div>中没有给出任何元素。

如果您从

更改选择器

selector: '[mte-glyph-toolbar-item]',

to

selector: 'li[mte-glyph-toolbar-item]',

或

selector: 'li',

您将获得<li>元素。