Angular 2 独立组件 [英] Angular 2 stand alone components
问题描述
最近刚转向 Angular 2，我只是想了解几乎所有的内容.
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 elements
有没有办法只引导相关组件?
Is there a way to only bootstrap only the relevant components?
此外，Angular 2 正在开发模式下运行.调用 enableProdMode() 以启用生产模式."控制台消息会多次出现，具体取决于我在页面上有多少个组件，这让我觉得我错过了什么.
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.
模块配置
// 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() {
}
}
推荐答案
您可以省略引导选项并自己实现 ngDoBootstrap().并且要有条件地引导组件，只需在调用 appRef.bootstrap(SomeComponent); 之前执行 querySelector 以检查组件是否已经在页面上.
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);
}
}
}
注意: entryComponents 选项是必需的
最后在你的 index.html 中你可以省略第二个标签并且 angular 不会引发错误:
Finally in your index.html you can omit second tag and angular won't raise error:
<body>
<component-one></component-one>
</body>
如果您不想看到消息 Angular 2 is running in the development mode.调用 enableProdMode() 启用生产模式. 您可以只启用生产模式或使用以下(自 2.3.0 起)与上述类似(我建议使用第一种解决方案):
If 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();
}
}
这和 angular 在引导组件时在内部做的一样
It's just the same that angular does internally when bootstraping component
另见
这篇关于Angular 2 独立组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
