角度 2 中的指令执行顺序答案

【问题标题】：Directive execution order in angular 2角度 2 中的指令执行顺序
【发布时间】：2016-08-09 10:00:43
【问题描述】：

如果我有一个带有点击处理程序和自定义属性指令的简单按钮，如下所示：

<button  (click)="save()" attributedirective="project saved">Save</button>

在我的属性指令中，我使用 hostlistener 装饰器来监听点击事件：

@Directive({
    selector: `[attributedirective]`
})
export class AuditPusher {
    @Input('attributedirective') attributedirective: string = 'Missing message!';

    @HostListener('click', ['$event'])
    pushAudit() {
        console.log('text:'+this.attributedirective.toString());
    }
}

我的哪个代码会先触发？点击事件上的 save() 还是我的属性指令中的代码？ - 并且：想象一下有两个属性指令。哪个会先开火？在 Angular 1 中有类似指令优先级的东西，这在 Angular 2 中是如何完成的？我发现很难找到这方面的文档。

【问题讨论】：

标签： javascript angular angular2-directives

【解决方案1】：

我认为 Angular2 中还没有优先级概念。（如果它已经是我还不知道）但是不应该依赖于已经说过的特定顺序。

但正如你特别问的那样。顺序是，

1)当页面或组件被加载时，<button (click)="save()" attributedirective="project saved">Save</button> 也会被加载，并且由于指令**(attributedirective) 附加到按钮，Angular2 初始化指令 (attributedirective) 并将其绑定到按钮。

2) 由于 Save() 是附加到按钮的原生点击（Angular2 的方式）事件的函数，如果单击它，它将首先调用 save() 并然后它将寻找附加到它的其他绑定事件（如果有）（例如pushAudit）

【讨论】：

【解决方案2】：

据我所知，执行顺序是不确定的。你不应该依赖特定的顺序。

【讨论】：

不，据我所知，这也没有明确定义。

【解决方案3】：

当我有两个属性指令并且 Angular 在 DirectiveA 之前执行 DirectiveB 时，一个快速而肮脏的方法是解决这个问题，但我需要它的另一种方法是延迟我需要最后执行的东西：

export class DirectiveA {
    ngOnInit() {
        doStuff();
    }
}

export class DirectiveB {
    ngOnInit() {
        setTimeout(() => {
            doMoreStuff();
        }, 0);
    }
}

当您执行 setTimeout(0) 时，它会将执行推迟到下一个 Angular 处理周期，这正是我所需要的，以便及时设置 DirectiveA 中的所有内容以处理来自 @987654326 的事件@。

【讨论】：

检查 ApplicationRef.tick() 而不是 setTimeout(0)
是的，这也可以。以前也遇到过，没用过，下次试试，谢谢！

【解决方案4】：

我可能错了，但对我来说它是这样工作的：我有一个 svg:g 元素并添加了 2 个这样的指令：为了在导出部分的模块中首先执行指令B，我先添加了指令B，然后添加了指令A。

请注意，对于 svg，z-index 由元素在文档中出现的顺序定义。 How to use z-index in svg elements?.

我知道你有一个点击和一个自定义属性，但如果你有 2 个自定义属性，这可以工作！

【讨论】：