过去我在UI框架方面遇到了一些问题,比如Bootstrap和Semantic-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)
我不希望每个组件都写一个新元素。有办法避免这种情况吗?
答案 0 :(得分:1)
是的,因为User.find({}).then(function(users) {
let counter = 1;
users.forEach(function(user) {
delete user.password;
console.log("after delete",user) // password key/value exist
userMap[counter] = user;
counter++;
});
return userMap;
});
是Angular中DOM的虚拟元素。
使用此元素,您可以添加用于呈现DOM的任何条件。举个例子:
ng-container
但是,这些元素并不是真正创建的DOM。角度只会创建COMMENT_NODE for can,然后操纵bindins。您可以在下一个屏幕截图中看到:
评论节点不支持添加子节点!
您应该使用root属性(作为示例<ng-container *ngIf="1">
<ng-container *ngIf="1">
Element 1
</ng-container>
<ng-container *ngIf="0">
Element2
</ng-container>
</ng-container>
)将指令添加到节点中。
article
但是,在许多情况下,您必须添加条件来呈现元素。这样,您可以使用ng-container来不在DOM中呈现其他节点。
<article product-cart product="product"></article>