如何在 Angular 2 中动态加载组件，而不在 NgModule 的声明部分列出它们

Question

我们有一个 SPL，其中在index.html中定义了一个 ngModule：

var module = ng.core.NgModule({
        imports: [ng.platformBrowser.BrowserModule, ng.router.RouterModule, ng.material.MaterialModule],
        declarations: [],
        bootstrap: []
    })
    .Class({
        constructor: function () {}
    });

document.addEventListener('DOMContentLoaded', function () {
    ng.platformBrowserDynamic
        .platformBrowserDynamic()
        .bootstrapModule(module);
});

如您所见，我们的NgModule中的声明列表是空的。 例如，此代码由开发人员 A 完成，并与index.html一起加载到页面中

在另一个地方，开发人员 B 创建了一个简单的组件：

var tasks = ng.core.Component({
        selector: 'tasks',
        template: '<div>list of tasks here<div>'
    })
    .Class({
        constructor: function () {}
    });

此代码通过用户的交互和路线更改延迟加载。

我们如何将这个组件包含在我们的模块中？ 伪代码可能是：

module.AddComponent(tasks);

Answer 1

您可以尝试使用 forwardRef，但我不确定它是否有效，因为我没有任何代码可供测试。

 var module = ng.core.NgModule({
            imports: [ng.platformBrowser.BrowserModule, ng.router.RouterModule, ng.material.MaterialModule],
            declarations: [ng.core.forwardRef(() => tasks],
            bootstrap: []
        })
        .Class({
            constructor: function () { }
        });