在过去,我遇到了像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)
我不希望每个组件都写一个新元素.有办法避免这种情况吗？
解决方法
原因
是的,因为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 for can,然后操纵bindins.您可以在下一个屏幕截图中看到：
结论
解
<article product-cart product="product"></article>
但是,在许多情况下,您必须添加条件来呈现元素.这样,您可以使用ng-container来不在DOM中呈现其他节点.
<ng-container *ngIf="product.availableForPurchase">
<article product-cart product="product"></article>
</ng-container>
