装饰者的运行顺序是什么？

Question

我不明白为什么结果是“组件之前的指令”。

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()))