Angular.Dart如何动态地将组件添加到DOM?
发布时间:2020-12-17 06:46:47 所属栏目:安全 来源:网络整理
导读:我的项目中有一个自定义的@NgComponent,如果我将它放在应用程序的静态 HTML中,它就可以工作.我想弄清楚的是如何动态地向DOM添加一个?如果我构造我的Component的一个实例,它似乎不是Element类型,因此它不能直接添加到DOM中元素的子元素.是否有另一种方法来构
我的项目中有一个自定义的@NgComponent,如果我将它放在应用程序的静态
HTML中,它就可以工作.我想弄清楚的是如何动态地向DOM添加一个?如果我构造我的Component的一个实例,它似乎不是Element类型,因此它不能直接添加到DOM中元素的子元素.是否有另一种方法来构造我的组件或将其包装以便注入DOM?
例如我天真地期望能够做到这样的事情: dom.Element holderEl = dom.document.querySelector("#my-holder"); holderEl.children.add( new MyComponent() ); 但我也试过使用innerHTML将包含我的自定义元素的HTML附加到元素上 holder.innerHtml="<my-component></my-component>" 并使用document.createElement()创建元素 dom.Element el = dom.document.createElement("my-component"); dom.document.body.append(el); 但添加时似乎没有实现该组件. 谢谢, 解决方法
您可以动态添加组件,但必须手动调用Angular编译器,以便它注意到innerHTML中嵌入了一个组件.
然而,这不是“角度方式”. 相反,将您的模板写为 <div id="my-holder"> <my-component ng-if="should_component_be_displayed"></my-component> </div> 这里,只有当should_component_be_displayed为true时,才会创建my-component并将其包含在DOM中. 可以移除my-holder div,从而形成更清晰的DOM结构. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |