Javascript angular中的动态插件

问题是如何在Angular2+中实现与我在AngularJS中所做的类似的“东西”。下面我将描述什么是“东西”

问题描述 因此，我在AngularJS中创建的过程可以描述如下：

• 我们想把一个自定义的动态内容注入到一个页面中，我们称之为插件
• 该内容未在web客户端中定义，而是以结构化形式从服务器检索

也就是说，我们从服务器html和js接收插件运行所需的文件，然后加载并显示在页面上。在客户端上，我创建了一个AngularJs指令来保存插件所需的逻辑

以下是javascript插件代码的代码示例：

() => {
    return {
        templateUrl: 'directive-template-name',
        restrict: "E",
        controller: ['$scope', ... /* other dependecies */, function ($scope, ...) {
            /* directive code */
        }]
    };
}

以下是插件加载程序代码的代码示例：

// evaluate js function and compile directive
var diretiveFactory = eval(content.jsFile);

// AngularJS CompileProvider
CompileProvider.directive.apply(null, [content.name, diretiveFactory]);

// append html code to element using angular
var wrapper = angular.element("#" + wrapperName);
wrapper.html(requestedDirective[0].htmlContent);

// initialize dynamic content
var wrapperScope = wrapper.scope();
this.$compile(wrapper)(wrapperScope);

可以看到，此方法允许加载有效的javascript并将其“编译”为AngularJS指令，然后在页面上随意显示

角度2+ 新angular的问题是，据我所知，指令的概念被组件的概念所取代。此外，所有客户端代码现在都是用typescript编写的，并传输到javascript中供客户端浏览器使用。据我所知，所有依赖关系都在传输过程中得到解决

这会产生一些问题阻止为Angular 2+创建动态插件：

• A不知道如何将依赖项注入到动态创建的组件中，因为我不知道在进行转换时需要什么
• 假设我希望多个组件同时共存（例如，一个包含子组件的父动态组件）并能够通信，在AngularJs的情况下，我可以使用scope变量解决这个问题。在角2+分量被隔离的情况下，我如何解决这个问题
• 此外，我不知道如何创建ViewContainerRef以在经过评估的javascript代码中保存动态创建的组件。（参见下面的代码示例）

我将在下面提供到目前为止的代码示例。内容加载器类型脚本代码：

//some imports
import { Component, ComponentRef, Compiler, Injector, NgModule, NgModuleRef, ViewContainerRef} from '@angular/core';

// plugin content structure
class DynamicPageModel {
    name: string;
    htmlFile: string;
    jsFile: string;
}

export class DynamicContentService {

    constructor(
        private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>
    ) { }

    public LoadDynamicContent(container: ViewContainerRef, content: DynamicPageModel) {
        // evaluate js function and compile component
        var tmpCmp = Component({
            template: content.htmlFile,
            selector: content.name
        })(eval(content.jsFile)());
        var tmpModule = NgModule({declarations: [tmpCmp as any]})(class { });
        var factories = this._compiler.compileModuleAndAllComponentsSync(tmpModule)
        var f = factories.componentFactories[0];

        var cmpRef =  f.create(this._injector, [], null, this._m);

        // insert component into the container
        container.insert(cmpRef.hostView);
    }
}

() => {
    function dynamicMain() {
        this.componentName = 'Dynamic Example Main';
    }
    return dynamicExampleMain;
}

可以看出，这是一个非常简单的动态插件，无法使用任何服务或其他组件，因为它无法将它们注入自身

预期答案 作为对我问题的回答，我想听听我在尝试为Angular 2+创建动态插件时遇到的问题的解决方案

---

如果您知道在Angular 2+中运行时创建动态插件的更好方法（请记住：它们是从服务器检索的），我也想听听。

您是否尝试过这些方法：1）2）您知道，我无法在typescript中编写插件，因为在加载动态插件之前，传输过程已经结束。此外，我不能在Angular客户端应用程序中定义插件代码。它是单独从服务器检索的。@Konstantin我也一直在研究这个主题，我在这个博客中找到了一个有趣的解决方案：。您还可以使用示例-，查看github存储库。