Angular 2独立组件 | entryComponents

本文介绍了Angular 2独立组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我需要构建并且只是使用stand - 单独的组件，我希望能够如下使用我的组件。 < body> < component-one>< / component-one> < component-two>< / component-two> < / body> 我已经得到这些组件在页面上渲染出来的问题是当这些组件选择器在当前页面上不存在，我得到以下控制台错误... core.umd.js：2838 EXCEPTION：0：0中的错误由以下原因引起：选择器component-one与任何元素都不匹配另外，Angular 2正在开发模式下运行，调用enableProdMode（）来启用生产模式。控制台消息会以多倍的次数出现，具体取决于页面上有多少组件，这让我觉得我缺少某些东西。模块配置 //模块从'@ angular / core'导入{NgModule，CUSTOM_ELEMENTS_SCHEMA}; 从'@ angular / platform-browser'导入{BrowserModule}; //组件从'./components/componentOne'导入{ComponentOne}; 从'./components/componentTwo'导入{ComponentTwo}; $ b @NgModule（{ imports：[BrowserModule]，声明：[ComponentOne，ComponentTwo]， bootstrap：[ComponentOne，ComponentTwo]，模式：[CUSTOM_ELEMENTS_SCHEMA] }）导出类AppModule {构造函数（）{ } } 解决方案您可以省略bootstrap选项并自己实现 ngDoBootstrap（）。并且有条件地引导组件，在调用 appRef.bootstrap（SomeComponent）; 之前执行 querySelector 检查组件是否已经在页面上。 @NgModule（{ imports：[BrowserModule]，声明：[ComponentOne，ComponentTwo]， entryComponents：[ComponentOne，ComponentTwo] }）导出类AppModule { ngDoBootstrap（appRef：ApplicationRef）{ if（document.querySelector（'component-one'））{ appRef.bootstrap（ComponentOne）; if（document.querySelector（'component-two'））{ appRef.bootstrap（ComponentTwo）; $ / code $ / pre $ b $ p注意： / em> entryComponents 选项是必需的最后在您的index.html中可以省略第二个标签和角度won' t提出错误： < body> < component-one>< / component-one> < / body> Plunker Example 如果你不想看到 Angular 2正在开发模式下运行。调用enableProdMode（）以启用生产模式。您可以启用prod模式或使用与上面相似的以下（自2.3.0开始）（我建议使用第一个解决方案）： $ p $ @NgModule（{ imports：[BrowserModule]， declarations：[ ComponentOne，ComponentTwo]， entryComponents：[ComponentOne，ComponentTwo] }）导出类AppModule {构造函数（private resolver：ComponentFactoryResolver，private inj：Injector）{} ngDoBootstrap（appRef：ApplicationRef）{ if（document.querySelector（'component-one'））{ const compFactory = this.resolver.resolveComponentFactory（ComponentOne）; let compOneRef = compFactory.create（this.inj，[]，'component-one'）; appRef.attachView（compOneRef.hostView）; compOneRef.onDestroy（（）=> { appRef.detachView（compOneRef.hostView）; }）; if（document.querySelector（'component-two'））{ const compFactory = this.resolver.resolveComponentFactory（ComponentTwo）; let compTwoRef = compFactory.create（this.inj，[]，'component-one'）; appRef.attachView（compTwoRef.hostView）; compTwoRef.onDestroy（（）=> { appRef.detachView（compTwoRef.hostView）; }）; } appRef.tick（）; $ b $ p $ b 角度与内部引导组件 Plunker示例 a> 另见 https://github.com/angular/angular/issues/11730 Angular2 - 将组件转换为动态创建的元素 Just moved over to Angular 2 recently and i am just trying to get my head around pretty much all of it.I need to build and that just uses stand-alone components, I want to be able to utilise my components as follows.<body> <component-one></component-one> <component-two></component-two></body>I have got as far as getting these components to render out on the page the problem is when one of these component selectors are not present on the current page i get the following console error...core.umd.js:2838 EXCEPTION: Error in :0:0 caused by: The selector "component-one" did not match any elementsIs there a way to only bootstrap only the relevant components?Also, the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." console message comes in multiples times depending on how many components i have on the page, which makes me feel like i am missing something.Module config// Modulesimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';// Componentsimport { ComponentOne } from './components/componentOne';import { ComponentTwo } from './components/componentTwo';@NgModule({ imports: [ BrowserModule ], declarations: [ ComponentOne, ComponentTwo ], bootstrap: [ ComponentOne, ComponentTwo], schemas: [ CUSTOM_ELEMENTS_SCHEMA ]})export class AppModule { constructor() {}} 解决方案 You can omit the bootstrap option and implementing ngDoBootstrap() yourself.And to conditionally bootstrap components, just do a querySelector before calling appRef.bootstrap(SomeComponent); to check whether the component is already on the page.@NgModule({ imports: [ BrowserModule ], declarations: [ ComponentOne, ComponentTwo ], entryComponents: [ ComponentOne, ComponentTwo ]})export class AppModule { ngDoBootstrap(appRef: ApplicationRef) { if(document.querySelector('component-one')) { appRef.bootstrap(ComponentOne); } if(document.querySelector('component-two')) { appRef.bootstrap(ComponentTwo); } }}Note: entryComponents option is requiredFinally in your index.html you can omit second tag and angular won't raise error:<body> <component-one></component-one></body>Plunker ExampleIf you don't want to see message Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. you can just enable prod mode or use the following (Since 2.3.0) which is similar as above (i recommend to use the first solution):@NgModule({ imports: [ BrowserModule ], declarations: [ ComponentOne, ComponentTwo ], entryComponents: [ComponentOne, ComponentTwo]})export class AppModule { constructor(private resolver: ComponentFactoryResolver, private inj: Injector) {} ngDoBootstrap(appRef: ApplicationRef) { if(document.querySelector('component-one')) { const compFactory = this.resolver.resolveComponentFactory(ComponentOne); let compOneRef = compFactory.create(this.inj, [], 'component-one'); appRef.attachView(compOneRef.hostView); compOneRef.onDestroy(() => { appRef.detachView(compOneRef.hostView); }); } if(document.querySelector('component-two')) { const compFactory = this.resolver.resolveComponentFactory(ComponentTwo); let compTwoRef = compFactory.create(this.inj, [], 'component-one'); appRef.attachView(compTwoRef.hostView); compTwoRef.onDestroy(() => { appRef.detachView(compTwoRef.hostView); }); } appRef.tick(); }}It's just the same that angular does internally when bootstraping componentPlunker ExampleSee alsohttps://github.com/angular/angular/issues/11730Angular2 - Component into dynamicaly created element 这篇关于Angular 2独立组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！