the - update typescript angular

El compilador Angular 4 AOT no soporta mixins

Question

A veces uso Mixins para inyectar funciones repetidas como slugUrl() .

Pero no funciona con compilador 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 {

}

Si compilo este código, el compilador arroja:

La propiedad ''ngClassControl'' no existe en el tipo ''FooComponent''.

¿Algunas ideas?

Edición: dado que hubo alguien que preguntó, aquí hay otro ejemplo que usa mixins TS que reproduce el problema, esta vez a nivel de plantilla.

Componentes:

@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) {}

Mixins:

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:

ERROR en error: errores de análisis de plantilla: no se puede enlazar a ''etiqueta'' ya que no es una propiedad conocida de ''prueba''. ("] [tag] =" tag ">")

Answer 1

Consulte https://github.com/angular/angular/issues/19145

Creo que es el mismo problema. La herencia del decorador se rompe para los mixins, por lo que actualmente tendrá que duplicar propiedades decoradas.

Answer 2

El principal problema aquí es que el compilador angular tiene una funcionalidad limitada (lea más en los documentos )

El compilador AOT utiliza metadatos generados por MetadataCollector. Utiliza el modelo de objeto mecanografiado (árbol de Node ) ( es por eso que AOT solo se puede usar con ngfactory ) para recopilar toda la información necesaria para producir ngfactory (en algunos casos también ngsummary ).

Los ejemplos que proporcionaste son completamente diferentes para el compilador AOT:

1) decorador personalizado

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

Angular MetadataCollector incluirá @Mixin decorator en los metadatos del símbolo FooComponent (elemento en la matriz de decorators ), pero se omitirá cuando aot StaticReflector llamará a simplify ya que el decorador Mixin no está registrado en un mapa especial que incluya solo decoradores estrictamente definidos ( código fuente )

Además, si incluso lo incluimos en ese mapa, aún no se ejecutará durante una compilación porque no está disponible solo para decoradores admitidos.

2) llamar a la función personalizada

export class HomePageComponent extends TaggedComponent(MyComponent) {

MetadataCollector agregará TaggedComponent a la colección de metadatos como un símbolo como {__symbolic: ''error'', message: ''Symbol reference expected''}; pero también se saltará dentro de StaticReflector .

Y por lo que sé, actualmente no hay una solución que lo respalde.