Angular4：無法使用 <ng-container> 使用組件選擇器

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。 角度只會創建COMMENT_NODE ，然后可以操作bindins。 您可以在下一個屏幕截圖中看到：

結論

注釋節點不支持添加子節點！

解

您應該使用root屬性（作為示例article ）將指令添加到節點中。

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

但是，在許多情況下，您必須添加條件來呈現元素。 這樣，您可以使用ng-container來不在DOM中呈現其他節點。

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