Question

我在项目中使用AngularJS作为模板框架。

我不想仅使用 Angular，还要插入一些HTML。

<body>
    <my-app>Loading...</my-app>
    <hr />
    <!-- Another selector but doesn't work -->
    <my-app>Loading...</my-app>
</body>

我想重用选择器，但第二次调用不会被模板替换。

在调用之间插入不同的数据时，有没有办法重用组件？

我知道Angular2如何与全局组件和孩子一起工作，但有没有办法绕过它？喜欢使用partials组件吗？

我知道可以像this那样完成。

但是，如果我想在插入不同数据时重复使用模板3次，我必须声明3个组件？是否可以创建同一选择器的许多实例？

Answer 1

不支持此功能。第一个标签都被解决，第二个标签未到达。你需要像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');

AngularJS 2 - 重用组件

1 个答案: