我在我的项目中使用AngularJS作为模板框架.
我不想只使用Angular,还要插入一些HTML.
从Angular Tutorial开始：
<body>
<my-app>Loading...</my-app>
<hr />
<!-- Another selector but doesn't work -->
<my-app>Loading...</my-app>
</body>
我想重用选择器,但第二个调用不会被模板替换.
在调用之间插入不同的数据时,有没有办法重用组件？
我知道Angular2如何与全局组件和孩子一起工作,但有没有办法绕过它？
喜欢使用partials组件？
我知道它可以像this那样完成.
但是,如果我想在插入不同数据时重复使用模板3次,我必须声明3个组件？
是否可以创建同一选择器的许多实例？
解决方法
这不受支持.第一个标签都被解决,第二个标签未到达.你需要像
https://github.com/angular/angular/issues/915这样的东西
和https://github.com/angular/angular/issues/7136
这演示了一个变通方法http://plnkr.co/edit/O0KRZHUz5jdW40mY1EgA?p=preview.
let app = platform(BROWSER_PROVIDERS).application([BROWSER_APP_PROVIDERS]);
function bootstrapWithCustomSelector(app,componentType,selector:string) {
var bootstrapProviders = [
provide(APP_COMPONENT_REF_PROMISE,{
useFactory: (dynamicComponentLoader: DynamicComponentLoader,appRef: ApplicationRef,injector: Injector) => {
console.log('now');
var ref: ComponentRef;
return dynamicComponentLoader.loadAsRoot(componentType,selector,injector,() => { appRef._unloadComponent(ref); })
.then((componentRef) => ref = componentRef );
},deps: [DynamicComponentLoader,ApplicationRef,Injector]
}),];
return app.bootstrap(componentType,bootstrapProviders);
}
bootstrapWithCustomSelector(app,AppComponent,'my-custom-app');
