Tôi muốn đóng trình đơn thả xuống đăng nhập của mình khi người dùng nhấp vào bất cứ nơi nào bên ngoài danh sách thả xuống đó và tôi muốn làm điều đó với Angular2 và với "cách tiếp cận" Angular2 ...
Tôi đã thực hiện một giải pháp, nhưng tôi thực sự không cảm thấy tự tin với nó. Tôi nghĩ rằng phải có một cách dễ nhất để đạt được kết quả tương tự, vì vậy nếu bạn có bất kỳ ý tưởng nào ... hãy thảo luận :)!
Đây là cách thực hiện của tôi:
Thành phần thả xuống:
Đây là thành phần cho danh sách thả xuống của tôi:
- Mỗi khi thành phần này được đặt thành hiển thị, (Ví dụ: khi người dùng nhấp vào nút để hiển thị), nó sẽ đăng ký một chủ đề rxjs "toàn cầu" userMothy được lưu trữ trong Đối tượng dịch vụ .
- Và mỗi khi nó bị ẩn, nó sẽ hủy đăng ký chủ đề này.
- Mỗi lần nhấp vào bất cứ nơi nào trong mẫu của thành phần này sẽ kích hoạt phương thức onClick () , chỉ dừng sự kiện sủi bọt lên trên cùng (và thành phần ứng dụng)
Đây là mã
export class UserMenuComponent {
_isVisible: boolean = false;
_subscriptions: Subscription<any> = null;
constructor(public subjects: SubjectsService) {
}
onClick(event) {
event.stopPropagation();
}
set isVisible(v) {
if( v ){
setTimeout( () => {
this._subscriptions = this.subjects.userMenu.subscribe((e) => {
this.isVisible = false;
})
}, 0);
} else {
this._subscriptions.unsubscribe();
}
this._isVisible = v;
}
get isVisible() {
return this._isVisible;
}
}Thành phần ứng dụng:
Mặt khác, có thành phần ứng dụng (là cha mẹ của thành phần thả xuống):
- Thành phần này bắt mọi sự kiện nhấp chuột và phát ra trên cùng Chủ đề rxjs ( userMothy )
Đây là mã:
export class AppComponent {
constructor( public subjects: SubjectsService) {
document.addEventListener('click', () => this.onClick());
}
onClick( ) {
this.subjects.userMenu.next({});
}
}Điều gì làm phiền tôi:
- Tôi không cảm thấy thực sự thoải mái với ý tưởng có một Chủ thể toàn cầu đóng vai trò là người kết nối giữa các thành phần đó.
- Các setTimeout : này là cần thiết vì đây là những gì xảy ra cách khác nếu nhấp chuột người dùng trên nút đó hiển thị danh sách thả xuống:
- Người dùng nhấp vào nút (không phải là một phần của thành phần thả xuống) để hiển thị danh sách thả xuống.
- Danh sách thả xuống được hiển thị và nó ngay lập tức đăng ký vào chủ đề userMothy .
- Bong bóng sự kiện nhấp vào thành phần ứng dụng và bị bắt
- Thành phần ứng dụng phát ra một sự kiện về chủ đề userMothy
- Thành phần thả xuống bắt hành động này trên userMothy và ẩn danh sách thả xuống.
- Vào cuối, thả xuống không bao giờ được hiển thị.
Việc thiết lập thời gian chờ này làm trì hoãn việc đăng ký đến hết lượt mã JavaScript hiện tại để giải quyết vấn đề, nhưng theo ý kiến rất lịch sự theo quan điểm của tôi.
Nếu bạn biết các giải pháp sạch hơn, tốt hơn, thông minh hơn, nhanh hơn hoặc mạnh hơn, xin vui lòng cho tôi biết :)!