我正在使用angular 4.3, typescript 2.2

我想基于相同的代码库创建多个应用程序(网站)。所有网站都几乎相同,但是其中一些网站可能具有一些其他/不同的logc/模板。

我的想法是创建一个核心模块(主要包含组件),然后让应用程序使用该模块在其上构建模块,并根据需要进行重载:
-风格
-模板(完全替换模板,或仅修改模板的一部分)

  • 如何覆盖核心模块中使用的组件?

  • 我仅设法覆盖在路由中显式使用的组件,但无法覆盖直接在Core模块的模板中调用的子组件。我是否需要动态注入(inject)这些组件?
  • 在继承组件时,是否可以仅覆盖父模板的一部分?

  • 我猜想每个需要重写的模板部分都必须更改为核心模块中的组件(然后回到问题1才能在子应用程序中使用继承的组件)

    谢谢

    最佳答案

    问题#1

    这是对我有用的解决方案

    步骤1

    我将所有核心组件放在核心应用程序的核心模块中。

    步骤2

    我在核心应用程式中宣告了以下CustomModule功能

    declare var Reflect : any;
    
    export function CustomModule(annotations: any)
    {
      return function (target: Function)
      {
        let parentTarget = Object.getPrototypeOf(target.prototype).constructor;
        let parentAnnotations = Reflect.getMetadata("annotations", parentTarget);
    
        let parentAnnotation = parentAnnotations[0];
        Object.keys(parentAnnotation).forEach(key =>
        {
          if (parentAnnotation[key] != null)
          {
            if (typeof annotations[key] === "function")
            {
              annotations[key] = annotations[key].call(this, parentAnnotation[key]);
            }
            else if (typeof Array.isArray(annotations[key]))
            {
              let mergedArrayItems = [];
              for (let item of parentAnnotation[key])
              {
                let childItem = annotations[key].find(i => i.name  == item.name);
                mergedArrayItems.push(childItem ? childItem : item);
              }
    
                 annotations[key] = mergedArrayItems;
            }
            else if (annotations[key] == null)
            {  // force override in annotation base
              annotations[key] = parentAnnotation[key];
            }
          }
        });
    
        let metadata = new NgModule(annotations);
    
        Reflect.defineMetadata("annotations", [metadata], target);
      };
    }
    

    步骤3

    在另一个应用程序中,我创建了另一个名为InheritedModule的模块,创建了从CoreModule中的组件继承的组件。继承的组件必须与父组件具有相同的名称和选择器。

    步骤4

    我使InheritedModule从CoreModule继承。 InheritedModule是使用上面的CustomModule批注声明的(请勿使用NgModule)

    该新模块应声明并导出在步骤3中创建的组件
    @CustomModule({
      declarations: [    Component1, Component2  ],
      exports: [  Component1, Component2],
      bootstrap: [AppComponent]
    })
    export class InheritedModule extends CoreModule
    {
    }
    

    步骤5

    在子应用程序中导入InheritedModule。

    自定义模块功能将执行的工作是合并两个模块的注释,并在具有相同名称的情况下将InheritedModule的组件替换为CoreModule的组件。

    问题#2

    我想每当我想从核心应用程序覆盖部分html时,都必须用微小的组件替换html模板的一部分。如果有人有更好的主意,我将暂时不回答。

    10-06 12:34