Question

我试图创建一些包装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);
}

Answer 1

装饰器的类型签名中有一些错误阻止它通过类型检查器。

为了解决这些问题，您必须了解装饰器和装饰工厂之间的区别。

正如您可能怀疑的那样，装饰工厂只不过是一个返回装饰器的函数。

如果要自定义通过参数化应用的装饰器，请使用装饰器工厂。

以您的代码为例，以下是装饰工厂

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

export function AddCssClassToHost<C extends Constructor>(cssClass: string) {
    return function (Class: C) {

        // TypeScript does not allow decorators on class expressions so we create a local
        class Decorated extends Class {
            @HostBinding("class") cssClass = cssClass;
        }
        return Decorated;
    };
}

装饰器工厂接受一个参数，该参数自定义它返回的装饰器使用的css并替换目标（这是一口）。

但是现在我们想重新使用装饰工厂添加一些特定的CSS。这意味着我们需要一个普通的旧装饰器，而不是工厂。

由于装饰工厂只返回我们需要的东西，我们可以调用它。

使用你的第二个例子，

export const TopLevelRoutedComponent = AddCssClassToHost("content-container");

现在我们在应用程序上遇到错误

@TopLevelRoutedComponent
@Component({...})
export class AdminNavigationComponent {
    navItems = [{nameKey: "Multisite", routerLink: "multisite"}];
}

我们必须考虑原因。

调用工厂函数会实例化其类型参数。

我们需要一个创建通用装饰器的工厂，而不是返回非通用装饰器的通用装饰工厂！

也就是说，TopLevelRoutedComponent必须是通用的。

我们可以通过简单地重写我们的原始装饰器工厂，将类型参数移动到它返回的装饰器来实现这一点

export function AddCssClassToHost(cssClass: string) {
    return function <C extends Constructor>(Class: C) {

        // TypeScript does not allow decorators on class expressions so we create a local
        class Decorated extends Class {
            @HostBinding("class") cssClass = cssClass;
        }
        return Decorated;
    };
}

这是live example

如何在TypeScript中重用装饰器内的装饰器

1 个答案: