1

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

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

但是，如果我们想在不重复代码的情况下动态加载子组件怎么办？

真实例子：

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

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

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

谢谢

4

1 回答 1

0

您可以这样使用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 { }

干杯!

于 2016-09-29T14:13:44.570 回答