phát hiện Nhấn vào yếu tố bên ngoài trong góc 4 sử dụng chỉ thị

Question

Tôi đã sử dụng một chỉ thị tùy chỉnh để phát hiện nhấp chuột bên ngoài một phần tử trong góc 2 nhưng điều này cũng không thể thực hiện trong góc 4.

[plunkr]https://plnkr.co/edit/aKcZVQ?p=info

Khi tôi cố gắng sử dụng cùng một mã trong angular-4 Tôi nhận được các lỗi sau:

1. Đối số của loại '{template: string; chỉ thị: typeof ClickOutside []; } 'không thể gán cho tham số kiểu' Thành phần '. ==>

   @Component ({ templateUrl: "", directives: [ClickOutside] })

2. Loại 'Đặt' là không thể chuyển nhượng để gõ 'Quan sát'. trong chỉ thị bên ngOnInit() và ngOnDestroy()

   ngOnInit() { this.globalClick = Quan sát .fromEvent (tài liệu, nghe tiếng 'click') .delay (1) .do (() => { this.listening = true; }) đăng ký ((sự kiện: MouseEvent) => { this.onGlobalClick (sự kiện); }); }

   ngOnDestroy() { this.globalClick.unsubscribe(); }

Nếu có bất kỳ sự thay đổi trong việc kê khai chỉ thị ở góc 4 xin vui lòng cho tôi biết, các tài liệu chính thức là không có sự giúp đỡ trong vấn đề này.

Answer 1

Có vài thay đổi liên quan đến plnkr của bạn.

1. NgModules, hoặc thay vào đó hãy xem Archietcture của khung. Module này là nơi mà bạn nên đăng ký thành phần của bạn, dịch vụ và directices
2. Một khi bạn đã đăng ký chỉ thị của bạn bên trong mô-đun bạn không cần phải nhập nó bên trong các thành phần

Chỉ thị bản thân có vẻ tốt đẹp cho tôi. Tôi so sánh chỉ thị của bạn với tôi mà hoạt động tốt trong Angular 4.3.5.

Thực ra, bạn không cần bất kỳ chỉ thị nào trong trường hợp đó, trừ khi nó sẽ không được sử dụng lặp đi lặp lại. Nếu bạn chỉ cần áp dụng clickOutside đó cho menu, thì tốt hơn là hãy làm như sau:

Sự kiện nhấp chuột liên kết với bộ chọn "bên trong" của bạn như thế.Hãy nói rằng đó là thực đơn của bạn:

<ul id="menu" (click)="clickedInside($event)"> <li> .. </li> </ul> 

sau đó bên trong thành phần của bạn thêm clickedInside() chức năng như thế này:

clickedInside($event: Event){ 
    $event.preventDefault(); 
    $event.stopPropagation(); // <- that will stop propagation on lower layers 
    console.log("CLICKED INSIDE, MENU WON'T HIDE"); 
    } 

Và cuối cùng bạn có thể sử dụng Host Listener trong thành phần của bạn để ràng buộc vào cũng với phần còn lại của tài liệu

@HostListener('document:click', ['$event']) clickedOutside($event){ 
    // here you can hide your menu 
    console.log("CLICKED OUTSIDE"); 
    }