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

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 = {}> = new (...args: any[]) => T; 

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

     // TypeScript does not allow decorators on class expressions so we create a local 
     class Decorated extends C { 
      @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 <T extends Constructor>(C: T) { 

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

这里是一个live example