Angular2 动态组件

Question

我对 Angular2 还是很陌生，我还没有找到解决我正在尝试做的事情的方法。我会尝试用下面的例子来解释。

假设我们有一个父组件A，它可以包含一个子组件X 或Y。 这可以使用 viewchild 轻松解决。

但是，如果我们想动态加载子组件而不重复代码呢？

真实例子：

• 组件 U ：由调用该组件的用户调用的组件 A并根据用户的注入一个子组件（X或Y） 选择。
• 组件 A：网格容器，可以是表格、面板或 随便。
• 组件 X：包含服务 S1 行的视图
• 组件 Y：包含服务 S2 行的视图

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

一定有办法做到这一点，我只是找不到一个好的和干净的解决方案来满足这种需求。 任何帮助将不胜感激。

谢谢

Answer 1

您可以像这样使用Angular2 Component Router：

(注意：为了简单起见，我没有添加输入元素，而是使用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 { }

干杯！