Angular 4 AOT 编译器不支持混合

Question

有时我使用 Mixins 来注入(inject)重复的函数，比如 slugUrl()。

但它不适用于 Angular 4 编译器。

export function Mixin(decorators: Function[]) {
  return function (classFn: Function) {
    decorators.forEach(decorator => {
      Object.getOwnPropertyNames(decorator.prototype).forEach(name => {
        classFn.prototype[name] = decorator.prototype[name];
      });
    });
  };
}


@Mixin([BehaviorInjected])
export class FooComponent {

}

如果我编译这段代码，编译器会抛出:

Property 'ngClassControl' does not exist on type 'FooComponent'.

有什么想法吗？

编辑:因为有人问过，这里有另一个使用 TS 混合的例子重现了这个问题，这次是在模板级别。

组件:

@Component({
    selector: 'home-page',
    template: '<test [tag]="tag"></test>'
})
export class HomePageComponent extends TaggedComponent(MyComponent) {
    public tag = 'hi there';
}

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent extends TaggedComponent(MyComponent) {}

混合:

type Constructor<T> = new(...args: any[]) => T;

export function TaggedComponent<T extends Constructor<{}>>(Base: T) {
     class TaggedBase extends Base {
        @Input() tag: string;
     };

     return TaggedBase;
}

export class MyComponent {
    protected subscriptions: Subscription = new Subscription();
  // ...
}

错误:

ERROR in Error: Template parse errors: Can't bind to 'tag' since it isn't a known property of 'test'. ("][tag]="tag">")

Answer 1

这里的主要问题是 Angular 编译器的功能有限。(阅读更多信息 the docs)

AOT 编译器使用由 MetadataCollector 生成的元数据。它使用 typescript 对象模型(Node 树)(这就是 AOT 只能与 typescript 一起使用的原因)来收集生成 ngfactory 所需的所有信息。 (在某些情况下还有 ngsummary )文件。

您提供的示例对于 AOT 编译器是完全不同的:

1) 自定义装饰器

@Mixin([BehaviorInjected])
export class FooComponent {}

Angular MetadataCollector 将包括@Mixin FooComponent 元数据中的装饰器符号(decorators 数组中的项目)但它 will be skipped当 aot StaticReflector会调用simplify自 Mixin装饰器未在仅包含严格定义的装饰器的特殊映射中注册 ( source code )

此外，即使我们将它包含在该映射中，它仍然不会在 aot 编译期间执行，因为它仅适用于支持的装饰器。

2) 调用自定义函数

export class HomePageComponent extends TaggedComponent(MyComponent) {

MetadataCollector will add TaggedComponent元数据集合作为符号，如 {__symbolic: 'error', message: 'Symbol reference expected'};但它也是will be skipped里面StaticReflector .

据我所知，目前还没有支持它的解决方案。