Question

What are the lifecycle hooks of a zone?

Answer 1

There are four lifecycle hooks for asynchronous operations from zone.js.

1. onScheduleTask: This hook triggers when a new asynchronous task is scheduled. For example, when you call setTimeout()

   onScheduleTask: function(delegate, curr, target, task) {
       console.log('new task is scheduled:', task.type, task.source);
       return delegate.scheduleTask(target, task);
     }
2. onInvokeTask: This hook triggers when an asynchronous task is about to execute. For example, when the callback of setTimeout() is about to execute.

   onInvokeTask: function(delegate, curr, target, task, applyThis, applyArgs) {
       console.log('task will be invoked:', task.type, task.source);
       return delegate.invokeTask(target, task, applyThis, applyArgs);
     }
3. onHasTask: This hook triggers when the status of one kind of task inside a zone changes from stable(no tasks in the zone) to unstable(a new task is scheduled in the zone) or from unstable to stable.

     onHasTask: function(delegate, curr, target, hasTaskState) {
       console.log('task state changed in the zone:', hasTaskState);
       return delegate.hasTask(target, hasTaskState);
     }
4. onInvoke: This hook triggers when a synchronous function is going to execute in the zone.

   onInvoke: function(delegate, curr, target, callback, applyThis, applyArgs) {
       console.log('the callback will be invoked:', callback);
       return delegate.invoke(target, callback, applyThis, applyArgs);
     }