fixture.detectChange开始单步调试,如何执行到Directive的ngOnChange钩子

简介: fixture.detectChange开始单步调试,如何执行到Directive的ngOnChange钩子

is._tick里调用this.changeDetectorRef.detectChanges():


image.png


首先从RootViewRef开始检测:


image.pngimage.png




context里能看到Component的数据:

image.png



renderComponentOrTemplate:

image.png



refreshView里会调用init和check hook:


image.png

/**
 * Executes post-order init and check hooks (one of AfterContentInit, AfterContentChecked,
 * AfterViewInit, AfterViewChecked) given a view where there are pending init hooks to be executed.
 * @param lView The LView where hooks are defined
 * @param hooks Hooks to be run
 * @param initPhase A phase for which hooks should be run
 * @param nodeIndex 3 cases depending on the value:
 * - undefined: all hooks from the array should be executed (post-order case)
 * - null: execute hooks only from the saved index until the end of the array (pre-order case, when
 * flushing the remaining hooks)
 * - number: execute hooks only from the saved index until that node index exclusive (pre-order
 * case, when executing select(number))
 */
function executeInitAndCheckHooks(lView, hooks, initPhase, nodeIndex) {
    ngDevMode &&
        assertNotEqual(initPhase, 3 /* InitPhaseCompleted */, 'Init pre-order hooks should not be called more than once');
    if ((lView[FLAGS] & 3 /* InitPhaseStateMask */) === initPhase) {
        callHooks(lView, hooks, initPhase, nodeIndex);
    }
}

使用Directive实例调用hook:



image.png

function rememberChangeHistoryAndInvokeOnChangesHook() {
    const simpleChangesStore = getSimpleChangesStore(this);
    const current = simpleChangesStore === null || simpleChangesStore === void 0 ? void 0 : simpleChangesStore.current;
    if (current) {
        const previous = simpleChangesStore.previous;
        if (previous === EMPTY_OBJ) {
            simpleChangesStore.previous = current;
        }
        else {
            // New changes are copied to the previous store, so that we don't lose history for inputs
            // which were not changed this time
            for (let key in current) {
                previous[key] = current[key];
            }
        }
        simpleChangesStore.current = null;
        this.ngOnChanges(current);
    }
}


ngOnChanged hook被调用的前提是,从getSimpleChangesStore返回的simpleChangesStore里的current字段不为空:

image.png



相关文章
|
Web App开发 JavaScript API
ng-template 使用过程中参数传递错误的单步调试
ng-template 使用过程中参数传递错误的单步调试
|
3月前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
124 0
|
5月前
|
测试技术
Cypress的钩子函数
Cypress的钩子函数
Cypress的钩子函数
|
API
LyScript 实现Hook隐藏调试器
LyScript 插件集成的内置API函数可灵活的实现绕过各类反调试保护机制,前段时间发布的那一篇文章并没有详细讲解各类反调试机制的绕过措施,本次将补充这方面的知识点,运用LyScript实现绕过大多数通用调试机制,实现隐藏调试器的目的。
69 0
LyScript 实现Hook隐藏调试器
|
监控
钩子 (Hook)
钩子 (Hook)
207 1
|
消息中间件 C++ Windows
c++ hook 钩子的使用介绍
一、基本概念:     钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的。当消息到达后,在目标窗口处理函数之前处理它。
2593 0
fixture.detectChange开始单步调试,如何执行到Directive的ngAfterViewInit钩子
fixture.detectChange开始单步调试,如何执行到Directive的ngAfterViewInit钩子
fixture.detectChange开始单步调试,如何执行到Directive的ngAfterViewInit钩子
jasmine fixture.debugElement.query的单步调试
jasmine fixture.debugElement.query的单步调试
95 0
jasmine fixture.debugElement.query的单步调试
jasmine.spy对象的and.returnValue方法单步调试
jasmine.spy对象的and.returnValue方法单步调试
138 0
jasmine.spy对象的and.returnValue方法单步调试