trật tự thực hiện Chỉ thị ở góc 2

Question

Nếu tôi có một nút đơn giản với một bộ xử lý nhấp chuột và một tùy chỉnh thuộc tính chỉ thị như vậy:

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

Và trong chỉ thị thuộc tính của tôi Tôi đang sử dụng trang trí hostlistener nghe nhấp vào sự kiện:

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

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

Mã nào của tôi sẽ kích hoạt trước? Lưu() trên sự kiện nhấp chuột hoặc mã trong chỉ thị thuộc tính của tôi? - Và: Hãy tưởng tượng có hai chỉ thị thuộc tính. Cái nào trong số đó sẽ bắn trước? Trong Angular 1 có một cái gì đó giống như ưu tiên chỉ thị, làm thế nào điều này được thực hiện trong Angular 2? Tôi thấy khó tìm tài liệu về vấn đề này.

Answer 1

Theo như tôi biết thứ tự thực hiện không xác định. Bạn không nên phụ thuộc vào một thứ tự cụ thể.

Answer 2

Tôi nghĩ rằng khái niệm ưu tiên chưa có trong Angular2. (Nếu nó đã được tôi chưa nhận thức được nó) nhưng một không nên phụ thuộc vào một thứ tự cụ thể như đã nói.

Nhưng như bạn đã hỏi cụ thể. Trật tự sẽ là,

1) khi trang hoặc một thành phần được tải, <button (click)="save()" attributedirective="project saved">Save</button> được nạp quá và vì chỉ ** (attributedirective) được gắn vào nút, Angular2 khởi chỉ thị (attributedirective) và liên kết nó vào nút.

2) Như Save() là một chức năng gắn liền với nhấp chuột mẹ đẻ (cách Angular2 của) sự kiện nút nếu bạn nhấp vào nó, nó sẽ gọi tiết kiệm() đầu tiên và sau đó nó sẽ tìm kiếm khác sự kiện ràng buộc của (nếu có) gắn liền với nó (ví dụ. pushAudit)

Answer 3

Một cách nhanh chóng và dơ bẩn xung quanh này khi tôi đã có hai chỉ thị thuộc tính và góc được thực hiện DirectiveB trước DirectiveA nhưng tôi cần phải có nó theo cách khác xung quanh là để trì hoãn nội dung tôi cần thực hiện cuối cùng:

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

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

Khi bạn thực hiện setTimeout(0), nó sẽ trì hoãn việc thực hiện cho chu kỳ xử lý góc tiếp theo, đó chỉ là những gì tôi cần trong trường hợp của tôi cho mọi thứ trong DirectiveA để được thiết lập kịp thời để xử lý các sự kiện đến từ DirectiveB.