, wie eine Komponente Metadaten in Angular

Question

eine Winkelkomponente abzurufen hat Dekorateure:

@Component({ ... }) 
export class MyAngularComponent { 
    @Input() myInputParam: MyType; 
    @Input() myOtherInputParam: MyOtherType; 
    @Output() myOutputParam: MyOtherOutputType; 
} 

ich eine Angular Bibliothek haben, wo eine Menge Code Wiederholungen vermieden werden könnten (und Paketgröße reduziert), wenn ich könnte programmatisch Angulars @Input() Dekoratoren innerhalb einer gegebenen Komponente Klasse (die zur Bibliothek gehört, obwohl).

Aber ich habe Zweifel an der Portabilität einer solchen Implementierung. Ich habe irgendwo gelesen, dass das Reflect Polyfill (benötigt um Dekoratoren zur Laufzeit zu lesen) nicht benötigt wird, wenn die Angular App mit AoT enabled gebaut wurde (und nur Angular Decorators verwendet werden). Also nehme ich an, ich kann nicht einfach Reflect.* verwenden. Wie speichert Angular die Dekorateure? Gibt es eine zuverlässige, zukunftssichere Möglichkeit, sie zu lesen?

Verkleinerung sollte kein Problem sein, da das nur zum Lesen von Dekoratoren von Bibliothekskomponenten verwendet würde, also habe ich die Kontrolle darüber.

Also, wenn das auf tragbare Weise machbar ist (oder nicht, bin ich immer noch anders interessiert), wie kann ich diese Dekorateure lesen?

Answer 1

Ich habe irgendwo gelesen, dass das Reflektieren polyfill (benötigt Dekorateure zur Laufzeit lesen) ist nicht erforderlich, wenn die Winkel App hat mit AoT gebaut aktiviert ... Wie funktioniert Angular speichert die Dekorateure?

Tatsächlich Angular Pläne Abhängigkeit von dem Reflect Objekt selbst in Laufzeit zu entfernen. Aus diesem Grund wurde in der neuesten Version 5 die Reflect.defineMetadata durch Object.defineProperty in der makeDecorator ersetzt, die für das Anhängen der Metadaten an die Klasse zuständig ist. Hier ist der relevante Code:

export const ANNOTATIONS = '__annotations__'; 
export function makeDecorator(
    ... 
    const TypeDecorator: TypeDecorator = <TypeDecorator>function TypeDecorator(cls: Type<any>) { 
     // Use of Object.defineProperty is important since it creates non-enumerable property which 
     // prevents the property is copied during subclassing. 
     const annotations = cls.hasOwnProperty(ANNOTATIONS) ? 
      (cls as any)[ANNOTATIONS] : 
      Object.defineProperty(cls, ANNOTATIONS, {value: []})[ANNOTATIONS]; <----- 
     annotations.push(annotationInstance); 
     return cls; 
    }; 

Es bedeutet, dass in der v5 Sie Dekorateure auf der Komponentenklasse wie folgt zugreifen können:

export class AppComponent { 
    constructor() { 
     console.log((<any>AppComponent).__annotations__); 
    } 

Gibt es eine zuverlässige, zukunftssichere Art und Weise zu lesen Sie? Ich glaube nicht, dass mit Angular etwas Zukunftssicheres ist.

Wenn Sie eine Anwendung kompiliert mit AOT Angular verwenden statische Code-Analyse und stützt sich stark auf dem AST durch die TS-Compiler erzeugt. Wenn Sie in der Bauzeit auf Dekoratoren zugreifen möchten, dann ist das der richtige Weg und ich würde es als die zukunftssicherste Lösung bezeichnen.