Angular 角度2动态分量

我对Angular2非常陌生，我还没有找到一个解决方案。我将试着用下面的例子来解释

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

但是，如果我们想动态加载子组件，而不需要代码重复，该怎么办

实例：

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

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

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

谢谢

您可以这样使用：

（注意：为了简单起见，我没有添加输入元素，而是使用了

a

元素。不过，调用函数告诉路由器将加载的组件插入

）

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.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 { }

干杯

您可以按如下方式使用：

（注意：为了简单起见，我没有添加输入元素，而是使用了

a

元素。不过，调用函数告诉路由器将加载的组件插入

）

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.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 { }

---

---

干杯

请参阅Angular2组件路由器。这正是你想要的。我会让艾尔看看，谢谢@K3v1n对不起，你是说基本的吗？如果是这样，我不确定这正是我想要的。除非有我不知道的特性，角路由器应该将用户的请求重定向到组件，另一个例子：假设我们有一个组件a，在它的模板中有这样的东西：我们想注入子组件，而不是如果，如果，如果你知道你可以通过编程方式加载组件：（比如

this.router.navigate([“/path/of/component/route”]）

）。因此，您可以让它根据用户的选择加载组件。请参阅Angular2组件路由器。这正是您想要的。我会让al看一看，谢谢！@K3v1n抱歉，您是在说基本的吗？如果是，我不确定它是否正是我想要的。除非有我不知道的功能，否则Angular2组件路由器是为了将用户的请求重定向到组件，我正在尝试做的事情比这要复杂一点。另一个例子：假设我们有一个组件a，在它的模板中有这样的内容：我们想要注入子组件，而不是如果，如果，如果你知道你可以加载一个组件程序语法：（像

这个.router.navigate（[“/path/of/component/route”]）

）。这样你就可以根据用户的选择加载一个组件。好的，我现在明白你的意思了。无论如何，我已经在我的应用程序中设置了一个路由器，我需要在我的组件中放置第二个路由器，这可以命名路由器出口（）。这可能会起作用。但是，在我看来，使用路由器动态显示父组件中的子组件更像是一种变通方法，而不是一种适当的解决方案。您是否同意？此外，您是否会为每个需要通用的组件添加路由器组件？想象一个网格容器组件，如以下所示：模板：

{{this.title}}

无论如何，谢谢你的建议！注释代码格式非常糟糕：P.而且你总是很受欢迎的！：）我确实同意这似乎是一种解决办法。但是，我还没有看到任何适合你这类事情的成熟框架。路由器是最接近itOk的东西，我想现在明白你的意思了。无论如何，我已经在我的应用程序中设置了一个路由器，我需要在我的组件中放置第二个路由器，这可能会命名路由器出口（）。这可能会起作用。但是，在我看来，使用路由器动态显示父组件中的子组件更像是一种变通方法，而不是一种适当的解决方案。您是否同意？此外，您是否会为每个需要通用的组件添加路由器组件？想象一个网格容器组件，如以下所示：模板：

{{this.title}}

无论如何，谢谢你的建议！注释代码格式非常糟糕：P.欢迎你！：）我确实同意这似乎是一种解决办法。但是，我还没有看到任何适合你这类事情的成熟框架。路由器是最接近它的东西