Question

我对 Angular2 非常陌生，我还没有找到解决我想要做的事情的方法。我将尝试用以下示例进行解释。

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

但是，如果我们想要动态加载子组件而没有代码重复会怎样？

真实示例：

组件U：用户调用的组件，用于调用组件 A并根据用户注入子组件（X或Y）选择。
组件A：网格容器，可以是桌子，面板或不管。
组件X：包含服务S1的行的视图
组件Y：包含服务S2的行的视图

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

必须有办法做到这一点，我无法为这种需求找到一个良好而干净的解决方案。任何帮助将不胜感激。

由于

Answer 1

您可以使用Angular2 Component Router：

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

app.component.ts

<router-outlet>

app.routing.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.module.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);

干杯！

Angular2动态组件

1 个答案: