Geek Answers Handbook

Angular 2 - Multiple components in any layout on different static pages

I have a bunch of static pages that use various components that are placed wherever the HTML developer likes. for example, within any page of a WordPress site.

Although the component examples shown here are simple panels, in reality there are all kinds of components, for example. Search, Lists, Editors, Views, etc.

Currently, they run on many Wordpress sites, where each and every page can have completely different layouts. In the past, we used Angular 1.5, where a WP developer, you can simply place our application tag next to the body, and then any widget (we have about 30) can be placed 1 or more times on any page.

Components can be reused, so creating root components of components using the bootstrap [] property does not make sense, since you can use only one root component per page. As seen from my second example.

Technique 1

Here is a screenshot and Plunker for the first setup. Please note that I have 4 areas in which I place 3 components with reuse of component 1.

This example is done by arranging the components inside the same root component , which is impractical for my use case, when Wordpress pages will have completely different layout and composition requirements. .

Plunkr

enter image description here

Technique 2

I tried using a technique in which each widget is loaded as a root component based on this post Multiplication of several applications The surface of the Angular 2 component inside the page is not angular .

But when I use this technique, the second instance of the widget does not load. AKA widget 1.

Plunkr

See boot example

enter image description here

Technique 2 - Has Additional Problems

If you downloaded 3 root components, you MUST use all of them, otherwise Angular raises an error about a root component that you did not use.

Plunker

enter image description here

Technique 3

Using <ng-content></ng-content> does not work with root components.

See: Angular2 Root component with ng content

+7
angular
source share
4 answers

For this type of widget, it is better to have an ng2 application created for each widget, such as Bootstrap multiples applications . I posted a possible solution there.

I implement an ApplicationFactory that creates a dynamic type selector:

 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}); }

Then in ngAfterViewInit you can create a dynamic component using ComponentFactoryResolver

This is not an ideal solution, but it works.

+1
source share

You can create a bunch of shell components with different selectors, each of which will wrap the same component, and then load these shell components.

0
source share

Could you better explain what you want to achieve? I don’t understand you ... you do not need to create 4 different components to do what you are doing, you can just do it like this:

https://plnkr.co/pvvlD7O2gXZBjVkY16po?p=preview

 <table> <tr> <td> <h2>Area 1</h2> <my-widget></my-widget> </td> <td> <h2>Area 2</h2> <my-widget [title]="'custom title'"></my-widget> </td> </tr> <tr> <td> <h2>Area 3</h2> <my-widget [background]="'yellow'"></my-widget> </td> <td> <h2>Area 4</h2> <my-widget [title]="'Last one'" [background]="'blue'"></my-widget> </td> </tr> </table>
0
source share

Ok, with you update I got you. I am not a user, if there is some way to make the work that you are trying, but what I will do is something like this: `

 <body> <my-app> your table code </my-app> </body>

`and then create the root element template" my-app "as shown below: '

'' will link the html that you put inside the "my-app" to make it work, and you can use different content for each static page as you want.

0
source share

More articles:


All Articles