지연은 10 개 마커

Question

내가 가진 구글지도 구글 마커에 추가하고 Angular2 SideNav는 다음과 같이 페이지에 추가 : 내가 가진 내 구성 요소에서

<mat-sidenav-container> 
    <div id="map">Google Map [Code omitted]</div> 
    <mat-sidenav #sidenav position="end" align="end" class="user-sidenav"></mat-sidenav> 
</mat-sidenav-container>` 

:

@ViewChild(MatSidenav) sidenav: MatSidenav; 
// ... 

google.maps.event.addListener(gmr, 'click', (function(marker) { 
    return function() { 
     self.handleMarkerClick(marker); 
    }; 
})(gmr)); 

gmr은 다음과 같습니다

각 마커는 다음과 같은 코드로 추가 이벤트 리스너를 가지고 google.maps.Marker 및 self = this

handleMarkerClick은 다음과 같습니다 그것이 수행

private handleMarkerClick(marker: any) { 
    this.sidenav.open(); 
    console.log('sidenav open'); 
} 

있는 유일한 방법은 각도 재료 Sidenav을 엽니 다. 마커를 클릭 한 후 sidenav가 열리기 2-3 초가 지연됩니다. console.log()의 도움으로 'sidenav open'이 마커를 클릭 한 순간과 동일한 순간에 인쇄되지만 sidenav 애니메이션은 2-3 초 후에 시작됩니다.

<button mat-button (click)="sidenav.toggle()">Open sidenav</button> 

을 그리고 sidenav이와 함께 즉시 열립니다

그냥 테스트 목적으로, 나는 나의 HTML에 버튼을 추가했습니다.

사람이 HTML 대신 구성 요소에서 sidenav를 여는 데 지연이있는 이유를 알고 있습니까?

편집 : 지연 범위는 1-3 초입니다. 때로는 빠르기도하고 때로는 느려지기도합니다.

Edit2 : 다른 테스트를 수행하고 사용자 정의 sidenav 솔루션 (일부 html, 애니메이션 등)을 만들었습니다. 각도 재료는 기본적으로 sidenav를 복제합니다. 그리고 컴포넌트에서 호출 될 때 여전히 느리기 때문에 Angular Material 문제가 아닙니다. 모든 단서?

Answer 1

나는 무슨 일이 일어나고 있는지 알아 냈습니다.

이 같은 마커 구글 심지어 리스너를 추가 코드 작성 재 짓을했는지 우선 :

gmr.addListener('click',() => { 
    this.handleMarkerClick(gmr); 
}); 

가 그럼 난 많은 것들을 Zone.js.으로 진행되는 것으로 나타났습니다를 나는 그것이 무엇인지 단서가 없었습니다.

영역은 비동기 작업에서 지속되는 실행 컨텍스트입니다. 은 JavaScript VM 용 스레드 로컬 저장소로 생각할 수 있습니다. [발 github.com/angular/zone.js]

는 sidenav이 (어느 것이 handleMarkerClick() 갱신된다)의 코너 영역의 외측에 업데이트되기 때문에, UI가 올바르게 업데이트되지 것이다 낸다. 그래서 우리는 올바른 업데이트를 얻기 위해 this.zone.run을 포함해야한다 :

gmr.addListener('click',() => { 
    this.zone.run(() => { 
     this.handleMarkerClick(gmr); 
    }); 
}); 

NgZone는 클래스 생성자에 추가 '@angular/core' 및 zone 변수에서 포함 할 필요가있다.

지도가 날고 있으며 이벤트 핸들러는 시야가없는 패널을 전혀 표시하지 않고 토글합니다.