Angular踩坑总结

  • 组件通信父组件获取子组件传递的数据以及获取event对线时,必须使用$event作为参数
<child-component (customEvent)="eventHandle($event)" </child-component>

<button (click)="eventHandle($event)" >Btn</button>

  • 解决service worker 无法工作在Chromium < 60 的版本中(因为一个bug导致无法正常工作)
ngsw-worker.js:1989 Uncaught (in promise) DOMException: Failed to execute 'waitUntil' on 'ExtendableEvent': The event handler is already finished.
    at Driver.handleFetch (https://gsc.gamebean.net/v3/ngsw-worker.js:1989:15)
    at <anonymous>

解决方法为在sw脚本中加一个polyfill


  • Material OverlayRef的keydownEvents()会优先于触发元素的keydown事件触发,从而导致时间流无法按期运行
_overlayRef.keydownEvents().subscribe(()=>console.log('b'))

// 触发元素
<a (keydown)="testKeydownEvent()" href="" tabindex>Test</a>

testKeydownEvent(){
  console.log('a');
}

// 输出结果为 b,a  
// 可以使用delay操作符来延迟调用keydownEvents的事件

源码解析

首先 在 overlay-ref.ts#L34-L42 里进行声明,我们调用的时候返回这个 Observable,这个observable实际上调用了一个Subject作为自己的信息源,而这个Subjectoverlay-keyboard-dispatcher.ts文件的L80-L96发射数据,在L50进行监听。以上便是overlaykeydownEvents调用的过程。

我们可以发现, keydownEvents实际上是监听了document.bodykeydown事件,然后把这个事件转换成Observable接着返回给我们,因为采用了事件捕获机制,所以,如果在keydownEvents里面使用datech则永远不会触发触发元素的keydown事件 这个时候如果在_overlayRef的keydownEvents中调用detach方法 那么 触发元素的事件将永运无法运行

阅读:
464
评论:
0
转载:
0
时间:
2018-6-11 09:37

×你还没有登录,登陆后有更多特权喔!点我登录