Angular 2独立组件

Question

Just moved over to Angular 2 recently and i am just trying to get my head around pretty much all of it. 刚刚转移到Angular 2，我只是试图让我全神贯注于所有这一切。

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 elements

Is 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." 此外，“Angular 2正在开发模式下运行。调用enableProdMode（）以启用生产模式。” 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 模块配置

// 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

You can omit the bootstrap option and implementing ngDoBootstrap() yourself. 您可以省略bootstrap选项并自己实现ngDoBootstrap() 。 And to conditionally bootstrap components, just do a querySelector before calling appRef.bootstrap(SomeComponent); 有条件地引导组件，只需在调用appRef.bootstrap(SomeComponent);之前执行querySelector 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 required 注意： entryComponents选项是必需的

Finally in your index.html you can omit second tag and angular won't raise error: 最后在index.html中，您可以省略第二个标记，而angular不会引发错误：

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

Plunker Example Plunker示例

If you don't want to see message Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 如果您不想看到消息Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 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 ): 您可以启用prod模式或使用以下（自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();
  }
}

It's just the same that angular does internally when bootstraping component 它与bootstraping组件内部的角度相同

Plunker Example Plunker示例

See also 也可以看看

Angular 2独立组件

问题描述

1 个解决方案

解决方案1
3 2016-12-13 10:49:43

Angular 2独立组件

问题描述

1 个解决方案

解决方案1 3 2016-12-13 10:49:43

解决方案1
3 2016-12-13 10:49:43