왜 angular2에 detectChanges가 정확히 필요합니까?

Question

나는 다음과 같은 코드가 있습니다에 관계없이 fixture.detectChanges() "새로운"의 값으로 element1.textContent() 변경

it ("test detect change", async()=>{ 
    let fixture= TestBed.createComponent(AppComponent); 
    let element1= fixture.debugElement.nativeElement.querySelector("h1"); 
    expect(element1.textContent).toContain("come"); 
    element1.textContent="new"; 
    //fixture.detectChanges(); 
    expect(element1.textContent).toContain("come"); 
}); 

를? detectChanges() 함수를 호출 할 때만 변경을 수행하면 안됩니까? 그렇지 않으면 함수가 호출되지 않고 변경 내용이 등록 된 이후로 어쨌든 detectChanges를 갖는 것이 무엇입니까?

는 기본적으로 나는 내 마지막 변경 사항이 element1.textContent에 등록했다 안 이후 기능 시험을 통과 할 것으로 예상 = "새"를 detectChanges이

Answer 1

를 작동하기 때문에 호출하지 당신이하지 않은 테스트를 기대 귀하의 구성 요소를 올바르게. 조명기의 내용을 변경하지 않으려 고합니다. 구성 요소 속성을 변경하고 조명기가 적절하게 변경되었는지 확인하려면이 경우 detectChanges() 메서드가 필요합니다.

예 :

app.component.ts

@Component({ 
    selector : 'app-root', 
    template: '<h1>{{ title }}</h1>', 
}) 
export class AppComponent { 
    title = 'Test'; 
} 

app.component.spec.ts

it('should change the title',() => { 
    const compiled = fixture.debugElement.nativeElement; 
    const component = fixture.componentInstance; 

    expect(compiled.querySelector('h1').textContent).toBe('Test'); 
    component.title = 'New'; 
    fixture.detectChanges(); // <- Required for the following expectation to pass 
    expect(compiled.querySelector('h1').textContent).toBe('New'); 
}); 

직접 질문에 대답하기 위해서는 구성 요소 내에서 일어난 변화를 감지하고 조명기를 다시 렌더링하기 위해 조명기 detectChanges() 메서드가 필요합니다.