Angular 4 : unable to use with component selector

Question

过去，我在使用 Bootstrap 和 Semantic-UI 等 UI 框架时遇到过一些问题。当我在模板中实例化一个新组件时，它破坏了样式，因为 Angular2 在 DOM 中添加元素。

我决定在组件中使用并声明选择器为“[component-selector]”。

现在我已经升级到 Angular4，如果我在 ng-container 中使用组件选择器，我会收到此错误:

HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.appendChild (platform-browser.es5.js:2789)
    at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.appendChild (core.es5.js:13321)
    at createText (core.es5.js:11688)
    at createViewNodes (core.es5.js:12070)
    at callViewAction (core.es5.js:12530)
    at execComponentViewsAction (core.es5.js:12439)
    at createViewNodes (core.es5.js:12113)
    at createEmbeddedView (core.es5.js:11979)
    at callWithDebugContext (core.es5.js:13206)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12739)
    at DefaultDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.appendChild (platform-browser.es5.js:2789)
    at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.appendChild (core.es5.js:13321)
    at createText (core.es5.js:11688)
    at createViewNodes (core.es5.js:12070)
    at callViewAction (core.es5.js:12530)
    at execComponentViewsAction (core.es5.js:12439)
    at createViewNodes (core.es5.js:12113)
    at createEmbeddedView (core.es5.js:11979)
    at callWithDebugContext (core.es5.js:13206)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12739)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:4140)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

我不希望每个组件都写入一个新元素。有办法避免吗？

Answer 1

原因

是的，因为 ng-container 是 Angular 中 DOM 的虚拟元素。使用此元素，您可以添加渲染 DOM 的任何条件。例如:

<ng-container *ngIf="1">
    <ng-container *ngIf="1">
        Element 1
    </ng-container>

    <ng-container *ngIf="0">
        Element2
    </ng-container>
</ng-container>

但是，这些元素并不是真正创建的 DOM。 Angular 仅创建 COMMENT_NODE for 接下来可以操作绑定(bind)。您可以在下一个屏幕截图中看到:

结论

评论节点不支持添加子节点!

解决方案

您应该使用根属性(例如 article)将您的指令添加到节点中。

<article product-cart product="product"></article>

但是，在很多情况下，您必须添加条件才能呈现元素。这样，您可以使用 ng-container 来不在 DOM 中呈现额外的节点。

<ng-container *ngIf="product.availableForPurchase">
    <article product-cart product="product"></article>
</ng-container>