Angular2动态组件

Question

我对Angular2很新，我还没有找到解决方案，我正在尝试做什么。 我将尝试用以下示例进行解释。

假设我们有一个父组件A ，它可以包含子组件X或Y. 使用viewchild可以很容易地解决这个问题。

但是， 如果我们想在没有代码重复的情况下动态加载子组件呢？

真实的例子：

• 组件U：用户调用的组件，它调用组件A并根据用户的选择注入子组件（X或Y）。
• 组件A：网格容器，可以是表，面板或其他任何东西。
• 组件X：包含服务S1的行的视图
• 组件Y：包含服务S2的行的视图

目的是轻松更改容器，自动更改所有视图。

必须有办法做到这一点，我找不到满足这种需求的良好和干净的解决方案。 任何帮助将非常感激。

谢谢

Answer 1

您可以使用Angular2组件路由器 ：

（注意：为了简单起见，我没有添加输入元素，而是使用a元素。虽然调用一个函数来告诉路由器将加载的组件插入<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 { }

干杯!