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

从哪个元素获取ViewContainerRef元素并不重要。 createComponent将添加一个兄弟并使用动态创建的组件的选择器作为元素。因为默认情况下使用选择器<div>中没有给出元素。

如果您从

更改选择器

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

到

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

或

selector: 'li',

您将获得<li>元素。

Answer 2

我认为你必须使用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 + move mte-toolbar-item-host到ul＆gt; 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

使用attribute指令的Angular 4动态加载组件用div包装

2 个答案: