Question

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

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

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

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

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

我的哪个代码会首先启动？ click事件的save（）或属性指令中的代码？ - 并且：想象一下有两个属性指令。哪个会首先开火？在Angular 1中有类似指令的优先级，在Angular 2中是如何完成的？我发现很难找到相关文档。

Answer 1

据我所知，执行顺序未定义。你不应该依赖特定的订单。

Answer 2

我认为Angular2中没有优先级概念。（如果已经我还没有意识到这一点）但是人们不应该依赖于已经说过的特定订单。

但正如你特别要求的那样。订单就是，

1）当加载页面或组件时，<button (click)="save()" attributedirective="project saved">Save</button>也被加载，因为指令**（attributesirective）附加到按钮，Angular2 初始化指令（belongsirective）和将绑定到按钮。

2）由于保存（）是一个附加到本机点击（Angular2的方式）按钮事件的功能，如果你点击它，它将首先调用 save（）然后它将寻找附加到其上的其他绑定事件（如果有的话）（例如。pushAudit）

Answer 3

当我有两个属性指令并且Angular在DirectiveB之前执行DirectiveA时，这是一个快速而又肮脏的方法，但我需要反过来是延迟我需要执行的东西最后：

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

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

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

Answer 4

我可能错了，但对我来说它的工作原理如下：我有一个svg：g元素并添加了2个这样的指令：为了在导出部分的模块中首先执行directiveB，我首先在directiveA。之后添加了directiveB。

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

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

角度为2

4 个答案: