Angular2动态组件

Question

I'm pretty new to Angular2 and I haven't found a solution to what I'm trying to do. I'll try to explain with the following example.

Let's say we have a parent component A which could include either a child component X or Y . That could be easily solved using a viewchild.

But, what if we wanted to load the child components dynamically without code duplication?

Real example :

• Component U : Component called by the user which calls the component A and injects a child component (X or Y) according to the user's choice.
• Component A : Grid container which could be a table, a panel or whatever.
• Component X : View containing rows for the service S1
• Component Y : View containing rows for the service S2

The aim would be to easily change the container, changing all the views automatically .

There must be a way to do that, I just can't find a good and clean solution for that sort of need. Any help would be much appreciated.

Thanks

Answer 1

You can use the Angular2 Component Router as so:

(Note: For simplicity reasons, I have not added input elements and instead, used a elements. The same procedure applies though, call a function to tell the router to insert the loaded component into the <router-outlet> )

app.component.ts

import { Component }       from '@angular/core';
import { Router }       from '@angular/router';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <!-- to show how the function can be called -->
            <a href="#" (click)="load('/page1')">Page 1</a>

            <!-- Right way with links -->
            <a href="#" routerLink="/page1">Page 1</a>

            <router-outlet></router-outlet>
        </div>
    `
})
export class AppComponent {
    constructor(private router: Router)

    load(path: string): void {
        this.router.navigate([path]);
    }
}

app.routing.ts

import { ModuleWithProviders }   from '@angular/core';
import { Routes, RouterModule }  from '@angular/router';

const appRoutes: Routes = [
    {
        path: "page1",
        component: "PageOneComponent"
    }
];

export const appRoutingProviders: any[] = [

];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { appRouting, appRoutingProviders }  from './app.routing';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        appRouting,
    ],
    declarations: [
        RootComponent,
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Cheers!