angular1.5 组件学习 -- 3、组件的生命周期钩子

Components（生命周期）钩子函数

angular1.5为每个组件提供了生命周期钩子函数去响应不同的时刻，有以下几个钩子：

　　1、$onInit()：此时 component 构造函数初始化完毕（包括 bindings 中的数据），我们可以使用它来将浮在控制器各个地方的初始化变量集中起来，统一进行初始化操作。

this.$onInit = function () {
    this.sayHello = "Hello !";
}

 

　　2、$onChanges(changesObj)：当 bindings 单向数据变化时会触发这个钩子。父组件向子组件单向传输数据：“@”、“<”。注：双向绑定不出发。

this.$onChanges = function (event) {
    //该 event 对象中有单向传输的变量及值方便获取
    console.log(event);
}

　　3、$doCheck()：每次脏检查会触发的钩子。

this.$doCheck = function () {
    //每次脏检查都会触发
    console.log('check');
}
this.$onInit = function () {
    //组件加载完成初始化
    this.num = 0;
    $interval(function () {
        self.num = Math.random();
    }, 1000)
}

　　4、$onDestroy()：当 controller 的 scope 销毁时会触发的钩子。比如：你使用了 $postLink 来设置了DOM事件监听函数或者其他非Angular原生的逻辑，在 $onDestroy 中你可以把这些事件监听或者非原生逻辑清理干净。

　　5、$postLink()：当组件及其子组件的元素已经被编译和链接触发的钩子。一个使用场景：tabs 组件中有未知长度的 tabs 数组，而其内 tab 的个数，通过每个 tab 组件初始化后调用 tabs 组件的 add 方法来 push 进 tabs 数组；此时如果想设置默认第几个 tab 被选中，那么只能等待所有 tab页加载完成，才能进行被选中设置。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>postLink 与 transclude 合用</title>
    <script src="angular.js"></script>
    <style>
        .selected {color:red};
    </style>
</head>

<body>
    <tabs>
        <tab label="Tab 1">
            Tab 1 contents!
        </tab>
        <tab label="Tab 2">
            Tab 2 contents!
        </tab>
        <tab label="Tab 3">
            Tab 3 contents!
        </tab>
    </tabs>
    <script>
        var tab = {
            bindings: {
                label: '@'
            },
            require: {
                tabs: '^^'
            },
            transclude: true,
            template: `
                <div class="tabs__content" ng-if="$ctrl.tab.selected">
                    <div ng-transclude></div>
                </div>
            `,
            controller: function () {
                this.$onInit = function () {
                    this.tab = {
                        label: this.label,
                        selected: false
                    };
                    this.tabs.addTab(this.tab);
                };
            }
        };

        var tabs = {
            transclude: true,
            template: `
                <div class="tabs">
                    <ul class="tabs__list">
                        <li ng-repeat="tab in $ctrl.tabs">
                            <a href=""
                                ng-bind="tab.label"
                                ng-click="$ctrl.selectTab($index);"></a>
                        </li>
                    </ul>
                    <div class="tabs__content" ng-transclude></div>
                </div>
            `,
            controller: function () {
                this.$onInit = function () {
                    this.tabs = [];
                };
                this.addTab = function addTab(tab) {
                    this.tabs.push(tab);
                };
                this.selectTab = function selectTab(index) {
                    for (var i = 0; i < this.tabs.length; i++) {
                        this.tabs[i].selected = false;
                    }
                    this.tabs[index].selected = true;
                };
                this.$postLink = function () {
                    this.selectTab(0);
                }
            }
        };

        angular.module('app', [])
            .component('tab', tab)
            .component('tabs', tabs);
    </script>
</body>
</html>

这里涉及到组价的另一个属性：transclude，后面会更新其使用。

posted @ 2018-01-26 16:19  名字不好起啊  阅读(515)  评论(0)  编辑  收藏  举报