typescript - 装饰器的运行顺序是什么？

Question

我不明白为什么结果是“directive before component”。

function Component(component) {
    console.log('selector: ' + component.selector);
    console.log('template: ' + component.template);
    console.log('component init');
    return (target: any) => {
        console.log('component call');
        return target;
    }
}

function Directive() {
    console.log('directive init');
    return (target: any) => {
        console.log('directive call');
        return target;
    }

}

@Component({selector: 'person',template: 'person.html'})
@Directive()
class Person {}

let p = new Person();

输出:

selector: person
template: person.html
component init
directive init
directive call
component call

组件调用不应该在指令调用之前吗？

Answer 1

装饰器表达式被自上而下调用，并产生装饰器。
装饰器自身以相反的方向运行，从下到上:

@a @b x
// bit like
{
  const decA = a
  const decB = b
  decA(decB(x))
}

在你的例子中

{
  const decComp = Component({selector: 'person', template: 'person.html'})
  // selector: person
  // template: person.html
  // component init
  const decDirective = Directive()
  // directive init
  decComp(decDirective(Person))
  // directive call
  // component call
}

Reference