如何在 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 () { }
        });