내보기가 업데이트되지 않는 이유는 무엇입니까?

Question

아래 코드에서 관찰 할 수있는 것처럼 구독하고 콜백에서 상태를 result으로 설정합니다. 이것은 뷰의 * ngIf에서 사용됩니다. 사실은 true가 반환되는 경우에도 뷰가 업데이트되지 않습니다.

export class AppComponent { 

    private status; 

    constructor (private proxyService: ProxyService) { 

    } 

    ngOnInit(){ 
    //setInterval(()=>console.log(this.isInjected),1000); 
    this.proxyService.someObservable.subscribe((result)=>{ 
     this.status = result; 
     console.log(result); 
    }); 
    } 

} 

이제 주석 처리 된 행을 볼 수 있습니다. 디버깅하는 동안 나는 그것을 추가했고, 기이 한 일은 뷰 업데이트를 만드는 것이다. 어떤 아이디어? 참고로

, 즉 내보기입니다 :

<div *ngIf="status"> 
    <app-userlane-inject></app-userlane-inject> 
    </div> 
    <div *ngIf="!status"> 
    <span>Status is false.</span> 
    </div> 
{{status}} 

하위 구성 요소가 렌더링되지 않습니다 및 문자열 보간은 거짓 남아있는 경우에도 콘솔 로그 (간격이있는 경우, 다음 작동 제외) 사실. 여기

서비스가 넓은 의미에서하는 것입니다 : 관찰 가능한을 표시

var mySubject= new BehaviorSubject(false); 


@Injectable() 
export class ProxyService { 
    public someObservable= mySubject.asObservable(); 


//Kinda deep callback tree, then finally 
    mySubject.next(true) 

} 

Answer 1

클래스 외부에서 mySubject을 초기화하면 Angulars 영역 외부에서 실행되어 Angular가 이벤트를 인식하지 못하게되어 변경 감지가 실행되지 않습니다.

@Injectable() 
export class ProxyService { 
    private mySubject= new BehaviorSubject(false); 
    public someObservable= this.mySubject.asObservable(); 


//Kinda deep callback tree, then finally 
    this.mySubject.next(true) 
} 

갱신

당신은

constructor(private zone:NgZone) {} 

this.zone.run(()=> this.mySubject.next(true)); 

를 사용할 수 있지만이 방법으로 문제가 해결 될 경우 일부 이벤트 또는 콜백이 호출 체인에 뭔가 문제가 아마도이 Angulars 구역에서는 발생하지 않습니다.

Answer 2

가장 좋은 방법은 그들을 표시 할 바보 같은 구성 요소를 만드는 것입니다.

예 :

this.status는 관찰

그것을 표시 벙어리 성분을 생성 경우

.

//dumb component to display status 

    @Component({ 
     selector: 'dumb-display-comp', 
     template: '{{ status }}' 
    }) 
    export class DumbDisplayComp { 
     @Input() status: any; 
    } 

이제 상위 구성 요소에서 바보 구성 요소를 사용하고 비동기 파이프로 관찰 가능 항목을 입력으로 보냅니다.

벙어리 구성 요소를

<dumb-display-comp [status]="status | async" ></dumb-display-comp> 

앱을 사용하여 부모 템플릿은 메인 사람을 declutter하는 바보 같은 구성 요소로 가득해야합니다. 그냥 내 두 센트.