Question

我不明白为什么结果是＆＃34;指令在组件＆＃34;之前。

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

component call之前不应该directive 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

Answer 2

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

没有。内心会在外面被召唤。基本上

@C
@D
class Person {}

变成某事类似于：

C(D(class Person()))

什么是装饰者运行顺序？

2 个答案: