Question

最近刚刚搬到了Angular 2，我只是试着全神贯注地看看它。

我需要构建并且只使用独立组件，我希望能够按如下方式使用我的组件。

<body>
   <component-one></component-one>
   <component-two></component-two>
</body>

我已经得到了这些组件在页面上呈现问题，当当前页面上没有这些组件选择器之一时，我得到以下控制台错误......

core.umd.js:2838 EXCEPTION: Error in :0:0 caused by: The selector "component-one" did not match any elements

有没有办法只引导相关组件？

此外，＆＃34; Angular 2正在开发模式下运行。调用enableProdMode（）以启用生产模式。＆＃34;控制台消息是多次，取决于我在页面上有多少组件，这让我觉得我错过了一些东西。

模块配置

// Modules
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Components
import { 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() {

}

}

Answer 1

您可以省略bootstrap选项并自行实施ngDoBootstrap()。要有条件地引导组件，只需在调用querySelector之前执行appRef.bootstrap(SomeComponent);以检查该组件是否已在页面上。

@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);
    }
  }
}

注意： entryComponents选项是必需的

最后在index.html中，您可以省略第二个标记，而角度不会引发错误：

<body>
  <component-one></component-one>
</body>

<强> Plunker Example

如果您不想看到消息Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.，您可以启用产品模式或使用以下（自2.3.0起）与上述类似的内容（我建议使用第一个溶液）：

@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(); } }

与bootstraping组件
时内部的角度相同
<强> Plunker Example

另见

https://github.com/angular/angular/issues/11730

Angular2 - Component into dynamicaly created element

Angular 2独立组件

1 个答案: