Though the sample components shown here are simple Panels,but in
reality there are all sorts of components,e.g. Search,Lists,
Editors,Views etc…Currently they have been done on lots of wordpress Sites where each and
every page can have totally different layouts. In the past we used
Angular 1.5 where the WP developer you could just put our app tag up near the body and then any widget (we have about 30) could be placed 1 or more times in any page.
组件可以重复使用,因此通过bootstrap []属性创建组件根组件没有意义,因为您只能在页面上使用一次根组件.如我的第二个例子所示.
技术1
这是第一次设置的屏幕截图和Plunker.请注意,我有4个区域,其中我放置3个组件,组件1被重用.
这个例子是通过在单个根组件中布置组件来完成的,这对于我的wordpress Pages具有完全不同的布局和组合要求的用例是不切实际的.
.
技术2
我尝试使用一种技术,其中每个窗口小部件都作为根组件进行自举,基于这篇文章Bootstrapping Multiple Applications Sprinkling Angular 2 components inside a non-angular page.
但是当我使用这种技术时,小部件的第二个实例不会加载. AKA小工具1.
请参阅bootstrapping示例
技术2 – 还有其他问题
如果你有自举的3个根组件,你必须使用它们全部,否则Angular会抛出你没有使用的根组件的错误.
技术3
< ng-content>< / ng-content>的使用似乎没有工作根组件.
我实现了一个ApplicationFactory,它创建了一个动态选择器,如：
moduleFactory(selector: string,childModule : ModuleWithProviders) {
@Component({
selector,// dynamic selector
...
})
export class AppComponent implements AfterViewInit{
constructor(resolver: ComponentFactoryResolver){}
ngAfterViewInit() {
// Cretate a Child components dynamic
// mapping from childModule::[bootstrap] components decoration
}
}
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,HttpModule
],bootstrap: [AppComponent]
})
class AppModule { }
platformBrowserDynamic()
.bootstrapModule(AppModule,{providers: childModule.providers});
}
然后在ngAfterViewInit中,您可以使用ComponentFactoryResolver创建动态组件
这不是一个理想的解决方案,但它有效
