Question

该解决方案必须兼容AOT。

示例：

// npm module 1 (will not be compiled, using gulp to build npm module)
@Component({
  templateUrl: './parent.component.html'
})
export class ParentComponent {}

------------------

// npm module 2 (will not be compiled, using gulp to build npm module) which has dependency npm module 1
@Component({
  templateUrl: '../../node_modules/parent-module/src/parent/parent.component.html'    // I need this to be replaced
})
export class ChildComponent extends ParentComponent {}

// both npm modules will be using inside a project, as dependancies and compiled at its build time.

原因我需要的是，ParentComponent和ChildComponent都是作为库项目开发的（不用作Angular库项目）。当那些作为npm模块安装的相对路径无效。

我使用了以下解决方案，但在aot构建中不起作用。（与ng serve配合正常）

// solution 1
const componentOptions = Object.assign(
  {},
  { template:  Reflect.getOwnPropertyDescriptor(ParentComponent, '__annotations__').value[0]['template'] },
  { selector: 'parent-component' }
);
@Component(componentOptions)

-----------------------

// solution 2
export function ComponentTemplate(cfg: any) {
  return function (constructor: Function) {
    const base = (Object.getPrototypeOf(constructor.prototype).constructor);
    cfg.template = (<any>base).__annotations__[0].template;
    return Component(cfg)(constructor);
  };
}
@ComponentTemplate({})

如何扩展组件并使用与父组件相同的模板？

0 个答案: