Geek Answers Handbook

AngularJS 2 - reuse components

I use AngularJSFrameWork as a template in my project.

I do not want to use only Angular , but also insert some HTML.

Ex from Angular Tutorial :

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

I want to reuse a selector, but the second call is not replaced by a pattern.

Is there a way to reuse a component when inserting different data between calls?

I know how it Angular2works with the global component and children, but is there any way around it? How to use partial components?

I know that this can be done, for example this .

, 3 , 3 ? ?

+4
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');
0

More articles:


All Articles