首页 文章

角度2中的指令执行顺序

提问于
浏览 次
5

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

<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中是如何完成的？我发现很难找到相关的文档 .

javascript angular angular2-directives

4 回答

  • 1

    据我所知，执行的顺序是不确定的 . 您不应该依赖特定的订单 .

    回复于
  • 2

    我认为Angular2中没有优先级概念 . （如果已经我还没有意识到这一点）但是人们不应该依赖于已经说过的具体顺序 .

    但正如你特别要求的那样 . 订单会是，

    1）当加载页面或组件时， <button (click)="save()" attributedirective="project saved">Save</button> 也被加载，因为指令**（attributesirective）附加到 button ，Angular2 initializes directive （attributesirective）和 binds 它到按钮 .

    2）由于 Save() 是一个附加到按钮的本机点击（Angular2的方式）事件的函数，如果你单击它，它将首先调用 save() 然后它将寻找附加到它的其他 binding's events(if any) （例如 pushAudit ）

    回复于
  • 1

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

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

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

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

    回复于
  • 2

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

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

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

    回复于

相关问题