时间戳

首页 > 解决方案 > Angular Elements：一个功能模块项目结构中的几个自定义 Web 组件可能吗？

angular6 - Angular Elements：一个功能模块项目结构中的几个自定义 Web 组件可能吗？

问题描述

我想用 angular6 和 angular-elements 创建几个自定义 Web 组件。现在，如果所有内容都直接在 app.module.ts 中定义，我就可以正常工作了。

但是我的项目由几个功能模块组成，里面有自己的自定义依赖项、组件等。

我尝试使用两个引导模块扩展 main.ts，但这不起作用。

 platformBrowserDynamic([{provide:LOCALE_ID,useValue:'de'}]).
   bootstrapModule(AppModule, {
    providers: [{provide: LOCALE_ID, useValue: 'de'}]
   })
.catch(err => console.log(err));

 platformBrowserDynamic([{provide: LOCALE_ID, useValue: 'de'}]).
  bootstrapModule(FeatureModule, {
   providers: [{provide: LOCALE_ID, useValue: 'de'}]
  })
.catch(err => console.log(err));

我怎样才能做到这一点，或者我必须将我所有的功能模块放入几个“自己的”项目中？

标签： angular6web-componentangular-elements

解决方案

Typically there will only be one bootstrap module which is the root of your application.

Other features/component modules can be imported as and when they are needed. For example, 

@NgModule({
    imports: [
        FeatureModules
    ],
    declarations: [ErrorComponent],
    providers: [
        Services
    ],
    bootstrap: [MainComponent]
})
export class AppModule {}

If your application has several roots then you can include them in the array defined by bootstrap.

See Angular's docs.

"The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.

This one root component is usually called AppComponent and is in the root module's bootstrap array."

推荐阅读