Angular4：无法使用组件选择器

发布时间：2020-12-17 18:10:26 所属栏目：安全来源：网络整理

导读：在过去,我遇到了像Bootstrap和Semantic-UI这样的UI框架的问题.当我在模板中实例化一个新组件时,它破坏了样式,因为Angular2正在DOM中添加元素. 我解决了在组件中使用并将选择器声明为“[component-selector]”的问题. 现在我已升级到Angular4,如果我在ng-cont

在过去,我遇到了像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.您可以在下一个屏幕截图中看到：

Example for comments after ng-container

结论

注释节点不支持添加子节点！

解

您应该使用root属性(作为示例文章)将指令添加到节点中.

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

但是,在许多情况下,您必须添加条件来呈现元素.这样,您可以使用ng-container来不在DOM中呈现其他节点.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!