Question

我们正试图在这里构建一个不错的Angular 2应用程序。

我们希望根据从Web服务调用中获取的内容加载一些组件。

您可以通过我们的基本组件中的网络服务调用获得json。

json可能如下所示：

[{
        "textChunk": {
            "text": "Lorem ipsum dolor sit amet"
        }
    }, {
        "factsBox": {
            "heading": "Sample heading",
            "body": "<p>Lorem ipsum sample</p><p>More sample rows</p>"
        }
    }, {
        "chart": {
            "type": "circle",
            "data": [30, 10, 50, 10]
        }
    }]

因此，我们得到“textChunk”，“factsBox”，“图表”及其各自的数据。

现在在我们的基础组件的ngOnInit方法中，我们想以某种方式加载/注入：

textChunk 组件
factsBox 组件
图表组件

使用各自的模板（最好是html文件或ASP.NET MVC区域视图）并为它们提供模型（存储在基础组件中的对象模型中）。

此外，json数组中的这些项可能会在不同的位置多次出现 - 这就是我们需要动态加载它们的原因。

我一直在寻找弃用的DynamicContentLoader，我一直在关注this thorough SO answer on dynamically loading components，我一直在寻找其他一些东西。我尝试理解SO答案，但没有这样做。

您是否可以通过基本示例向我指出如何动态加载我的组件及其模板？

为了给你更多的见解，这是我们的基本组件：

import { Component, Directive, Input, OnInit } from '@angular/core'
import { ApiService } from './api.service';
import { IApiItem } from './IApiItem';
import { KeysPipe } from './KeysPipe';

@Component({
    selector: 'sampleApi',
    templateUrl: 'app/templates/latest.html',
    providers: [ApiService]
})
export class ApiComponent implements OnInit {
    constructor(private apiService: ApiService) { } 
    model: IApiItem;

    ngOnInit() {
        this.get();
    }

    get() {
        this.apiService.getJson().subscribe(data => this.model = data);
    }
}

谢谢！

动态加载Angular2组件？

0 个答案: