原生javascript、angularjs、angular2分别是如何监控DOM加载完成

绝地灬酷狼 2022-03-19 10:50 728阅读 0赞

**1、问题：原生javascript、angularjs、angular2分别是如何监控页面加载**  
在上一节中介绍了原生的angularjs实现拖拽布局，但在实际的开发中需要适配自己项目中的页面，  
对页面中的每个模块需要在初始化的时候取得相应的元素，此时遇到的问题就是页面DOM未渲染完成，  
getElementsByClassName得到的都是空值，由此引出angularJs中如何监控页面加载完成。  
本文根据实际开发中总结出，原生js、angularjs、angular2分别是如何监控页面加载完成的。  
2、    **解决方法**  
   ** *2.1 原生js监控页面加载完成----DOMContentLoaded***  
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件才被触发，而无需等待样式表、图像和子框架的完成加载。  
另一个不同的事件 load 应该仅用于检测一个完全加载的页面。  
在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。  
注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。  
**示例：**

**2、2 angularJs框架监控页面加载完成----$viewContentLoad**  
这个涉及到angular $digest的生命周期，包括angularJs在引擎下如何工作的、如何双向绑定等等，具体原因这里不详述。  
介绍几种解决方法：  
    (1) 在controller里面利用$on或者$watch

$scope.$on('$viewContentLoaded', function() {  
        alert('1');  
    });  
    
    $scope.$watch('$viewContentLoaded', function() {  
        alert('1');  
    });

(2)$timeout的方法（不建议使用）  
    在方法中$timeout中内容会最后执行，相当于dom加载完再执行.  
    $timeout(function () \{  
        var tabContent = document.getElementsByClassName("tab-content");  
        tabContent\[0\].style.height = 520+ 'px';  
    \})  
* ***   2、3 angular2框架监控页面加载完成----组件的生命周期钩子ngAfterContentInit**  
    组件的生命周期是由angular2内部管理，从组件的创建、渲染，到数据变动事件的触发，再到组件从DOM中移除，angular2都提供了一系列的钩子，这些钩子包括  
    ngOnChanges  
    ngOnInit  
    ngDoCheck  
    ngOnDestroy  
    ngAfterContentInit  
    ngAfterContentChecked  
    ngAfterViewInit  
    ngAfterViewChecked  
    通过这些钩子可以让开发者非常方便的在这些事件触发时，执行相应的回调函数。  
    其中ngAfterViewInit - 组件相应的视图初始化之后调用。  
    在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。  
初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用，只调用一次。  
通过在该钩子下去执行可取得需要的元素，轻松解决问题解决问题。