我的單元測試源代碼：

import { Component } from '@angular/core'; import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { FocusDirective } from './focus.directive'; import { KeyboardFocusService } from './services';/*After cxFocus is enhanced with refreshFocus feature, an element will be focused twice when the page is displayed for the FIRST time: 1. in ngOnChanges hook2. in ngAfterViewInit hookOnce the page is rendered, all subsequent operations will only cause element to be focused once in ngOnChanges, because ngAfterViewInit then will not be triggered any more. */ const ELEMENT_FOCUSED_TIME = 2;@Component({selector: 'cx-host',template: ` <divid="a"[cxFocus]="{ autofocus: true, refreshFocus: modelA }"></div>`, }) class MockComponent {modelA = 'A';modelB = 'B'; }class MockKeyboardFocusService {get() {}set() {}shouldFocus() {}getPersistenceGroup() {}findFirstFocusable() {}hasPersistedFocus() {} }describe('FocusDirective', () => {let component: MockComponent;let fixture: ComponentFixture<MockComponent>;let keyboardFocusService: KeyboardFocusService;beforeEach(waitForAsync(() => {TestBed.configureTestingModule({declarations: [FocusDirective, MockComponent],providers: [{provide: KeyboardFocusService,useClass: MockKeyboardFocusService,},],}).compileComponents();fixture = TestBed.createComponent(MockComponent);component = fixture.componentInstance;keyboardFocusService = TestBed.inject(KeyboardFocusService);}));it('should be created', () => {expect(component).toBeTruthy();});it('should default tabindex to -1', () => {const el: HTMLElement = fixture.debugElement.query(By.css('#a')).nativeElement;fixture.detectChanges();expect(el.getAttribute('tabindex')).toEqual('-1');});it('should focus element marked with autofocus = true', () => {const el: HTMLElement = fixture.debugElement.query(By.css('#a')).nativeElement;spyOn(keyboardFocusService, 'findFirstFocusable').and.returnValue(el);fixture.detectChanges();expect(document.activeElement.id).toEqual('a');});it('should only refresh focus with change on configured attribute', () => {const el: HTMLElement = fixture.debugElement.query(By.css('#a')).nativeElement;let spiedFirstFocusable = spyOn(keyboardFocusService,'findFirstFocusable').and.returnValue(el);fixture.detectChanges();expect(document.activeElement.id).toEqual('a');expect(spiedFirstFocusable).toHaveBeenCalledTimes(ELEMENT_FOCUSED_TIME);component.modelB = '1';fixture.detectChanges();expect(spiedFirstFocusable).toHaveBeenCalledTimes(ELEMENT_FOCUSED_TIME);component.modelA = '1';fixture.detectChanges();expect(spiedFirstFocusable).toHaveBeenCalledTimes(ELEMENT_FOCUSED_TIME + 1);}); });

執行到refreshView時，由于之前已經執行過fixture.detectChange, 因此第7225行hooksInitPhaseCompleted這個標志位為true了，因此會執行AfterViewChecked hook，而不是else 分支內的AfterViewInit hook:

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的在Angular单个的单元测试里，调用多次detectChange，会重复执行ngAfterViewInit hook吗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。