相关疑难解决方法(0)

更新5/24/2018:我们现在从我的原始帖子中获得了+3版本的Angular,但仍然没有最终可行的解决方案.Lars Meijdam(@LarsMeijdam)提出了一个有趣的方法,当然值得一看.(由于专有问题,他不得不暂时删除他最初发布样本的GitHub存储库.但是,如果您需要副本,可以直接给他发消息.请参阅下面的评论以获取更多信息.)

Angular 6中最近的架构变化确实使我们更接近解决方案.此外,Angular Elements(https://angular.io/guide/elements)提供了一些组件功能 - 尽管不是我在本文中最初描述的内容.

如果来自令人惊奇的Angular团队的任何人碰巧碰到了这个,请注意,似乎还有很多其他人也对这个功能非常感兴趣.积压可能值得考虑.

我想实现在一个可插拔(插件)的框架Angular 2,Angular 4,Angular 5,或Angular 6应用程序.

(我开发这个可插拔框架的具体用例是我需要开发一个微型内容管理系统.由于这里不一定详述的一些原因,Angular 2/4/5/6它几乎完全适合该系统的大多数需求.)

通过可插拔框架(或插件架构),我特别指的是一个允许第三方开发人员通过使用可插拔组件创建或扩展主应用程序功能的系统,而无需直接访问或了解主应用程序的源代码或内部运作.

(关于" 没有直接访问或了解应用程序的源代码或内部工作 "的措辞是一个核心目标.)

可插入框架的示例包括常见的内容管理系统,如WordPress或Drupal.

理想情况(与Drupal一样)是简单地将这些可插入组件(或插件)放入文件夹,让应用程序自动检测或发现它们,让它们神奇地"工作".以某种热插拔方式发生这种情况,意味着在应用程序运行时,这将是最佳的.

我目前正在尝试确定以下五个问题的答案(在您的帮助下).

1. 实用性:Angular 2/4/5/6应用程序的插件框架是否实用？(到目前为止,我还没有找到任何实用的方法来创建一个真正的可插拔框架Angular2/4/5/6.)
2. 预期的挑战:在为Angular 2/4/5/6应用程序实现插件框架时可能会遇到哪些挑战？
3. 实施策略:可以采用哪些具体技术或策略来实现Angular 2/4/5/6应用程序的插件框架？
4. 最佳实践:为Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么？
5. 替代技术: 如果插件框架在应用程序中不实用Angular 2/4/5/6,那么相对等效的技术(例如React)可能适用于现代高反应性Web应用程序？

一般来说,使用Angular …

我正在尝试在最终版本2.0.0中动态加载组件.

使用RC5我使用以下代码加载:

创建一个指令来加载控件:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break; …