2016-08-09 4 views
5

Если у меня есть простая кнопка с обработчиком щелчка и пользовательский атрибут ДИРЕКТИВА следующим образом:Директива порядок выполнения углового 2

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

Какой из моих кодов выстрелит первым? Сохранить() в событии клика или код в моей директиве атрибута? - И: Представьте, что у вас есть две директивы атрибута. Кто из них выстрелит первым? В Angular 1 было что-то вроде директивных приоритетов, как это делается в Angular 2? Мне сложно найти документацию по этому вопросу.

ответ

1

Насколько я знаю, порядок исполнения не определен. Вы не должны зависеть от определенного порядка.

2

Я думаю, что приоритетная концепция еще не существует в Angular2. (Если это уже я еще не знаю об этом), но не следует зависеть от определенного порядка, как уже сказано.

Но как вы просили конкретно. Заказ будет,

1), когда страница или компонент загружается, <button (click)="save()" attributedirective="project saved">Save</button> загружается слишком и из-за директивы ** (attributedirective) прикреплен к кнопке , Angular2 инициализирует директивы (attributedirective) и связывает это к кнопке.

2) Как Save() функция прилагается к нативной мыши (путь Angular2 в) событие кнопки, если вы щелкните по ней, он будет вызывать Save() первым, а затем он будет искать другие связывающие праздники (если таковые имеются) прикрепленным к нему (например. pushAudit)

1

быстрый и грязный способ обойти это, когда у меня было две директивы атрибутов и Угловое выполнял DirectiveB до того DirectiveA, но мне нужно было это наоборот было отложить материал, который мне нужно выполнить последним:

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

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

Когда вы setTimeout(0) будет отложить исполнение до следующего углового цикла обработки, которая является именно то, что мне нужно в моем случае за все в DirectiveA быть создано во время для того, чтобы обрабатывать события, поступающие от DirectiveB.

+0

проверить ApplicationRef.tick() вместо setTimeout (0) –

+0

Возможно, это тоже сработает. Я сталкивался с этим раньше, но не использовал его, я дам ему попробовать в следующий раз, спасибо! – Boris

Смежные вопросы