Angular2 动态组件

Posted 2023-02-23

【中文标题】Angular2 动态组件

【英文标题】：Angular2 Dynamic Components

【发布时间】：2017-02-06 04:49:09

【问题描述】：

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

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

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

真实例子：

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

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

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

谢谢

【问题讨论】：

查看 Angular2 组件路由器。这正是您想要的。

我去看看，谢谢！

@K3v1n 抱歉，您说的是基本的Angular2 router 吗？如果是这样，我不确定这正是我正在寻找的。除非有我不知道的功能，否则角度路由器应该将用户的请求重定向到组件，我想做的事情比这要复杂一些。

另一个例子：假设我们有一个组件 A，在它的模板中有类似的东西： 我们想要注入子组件而不是做 if, if, if

您应该知道您可以通过编程方式加载组件：（如this.router.navigate(["/path/of/component/route"])）。所以你可以让它根据用户的选择加载一个组件。

【参考方案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  

干杯！

【讨论】：

好的，我明白你的意思了。

无论如何，我已经在我的应用程序中设置了一个路由器，我需要在我的组件中放置第二个路由器，这可以命名路由器出口（）。那可能行得通。但是，在我看来，使用路由器在父组件中动态显示子组件更像是一种解决方法，而不是正确的解决方案。你不同意吗？

另外，你会为每个需要通用的组件添加一个路由器组件吗？想象一个网格容器组件，如下所示：模板：<div class="container"> <div class="panel-group"> <div class="panel panel-primary"> <div class="panel-heading">this.title</div> <div class="panel-body"> <injected-component /> </div> </div> </div> </div> 无论如何，感谢您的建议！

评论代码格式非常可怕：P。随时欢迎您！ :)

我同意这似乎是一种解决方法。但据我所知，我还没有看到任何完善的框架适合你的事情。路由器是最接近它的东西