如何在TypeScript的decorators中重用decorators

我正在尝试创建一些包装Angular2装饰器的功能。我想简化向主机添加CSS类的过程,因此我创建了以下内容:

警告:不适用于AOT编译

type Constructor = {new(...args: any[]): {}};

export function AddCssClassToHost<T extends Constructor>(cssClass: string) {
    return function (constructor: T) {
        class Decorated extends constructor {
            @HostBinding("class") cssClass = cssClass;
        }
        // Can't return an inline class, so we name it.
        return Decorated;
    };
}

我还希望能够创建另一个添加特定CSS类的装饰器。

/**
 * Decorator to be used for components that are top level routes. Automatically adds the content-container class that is
 * required so that the main content scrollbar plays nice with the header and the header won't scroll away.
 */
export function TopLevelRoutedComponent<T extends Constructor>(constructor: T) {
   // This causes an error when called as a decorator
   return AddCssClassToHost("content-container");
    // Code below works, I'd like to avoid the duplication
    // class Decorated extends constructor {
    //     @HostBinding("class") cssClass = "content-container";
    // }
    // return Decorated;
}

// Called like
@TopLevelRoutedComponent
@Component({
    selector: "vcd-administration-navigation",
    template: `
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <vcd-side-nav [navMenu]="navItems"></vcd-side-nav>`
})
export class AdminNavigationComponent {
    navItems: NavItem[] = [{nameKey: "Multisite", routerLink: "multisite"}];
}

我收到的错误消息是

 TS1238: Unable to resolve signature of class decorator when called as an expression.
 Type '(constructor: Constructor) => { new (...args: any[]): AddCssClassToHost<Constructor>.Decorated; p...' is not assignable to type 'typeof AdminNavigationComponent'.
 Type '(constructor: Constructor) => { new (...args: any[]): AddCssClassToHost<Constructor>.Decorated; p...' provides no match for the signature 'new (): AdminNavigationComponent'

我可以通过创建一个函数来解决这个问题,该函数由两个

function wrapWithHostBindingClass<T extends Constructor>(constructor: T, cssClass: string) {
    class Decorated extends constructor {
        @HostBinding("class") cssClass = cssClass;
    }
    return Decorated; // Can't return an inline decorated class, name it.
}
export function AddCssClassToHost(cssClass: string) {
    return function(constructor) {
        return wrapWithHostBindingClass(constructor, cssClass);
    };
}
export function TopLevelRoutedComponent(constructor) {
    return wrapWithHostBindingClass(constructor, "content-container");
}

有没有一种方法可以使第一种样式工作,而不需要助手函数或复制代码?我意识到我的尝试不是很好,也没有意义,但我无法理解错误消息。

AOT兼容的版本 由于以下操作简单得多,因此不会导致AOT编译器崩溃。但是,请注意,如果使用webpack编译器,自定义装饰程序将被剥离,因此它仅在使用ngc编译时才起作用。

export function TopLevelRoutedComponent(constructor: Function) {
    const propertyKey = "cssClass";
    const className = "content-container";
    const descriptor = {
        enumerable: false,
        configurable: false,
        writable: false,
        value: className
    };
    HostBinding("class")(constructor.prototype, propertyKey, descriptor);
    Object.defineProperty(constructor.prototype, propertyKey, descriptor);
}