클릭 후 Angular2 변경 화재 감지

Question

Click 이벤트가 발생하면 Angular2가 ChangeDetection을 트리거하지 않습니다. 아래의 코드 스 니펫은 한 구성 요소에서 다른 구성 요소로 데이터를 가져 오는 것입니다.

는

(click)="$event.preventDefault(); setApartmentObject(FlatObject)"; 

에게 ApartmentOverviewComponent

constructor(private _apart:ApartmentService) {} 

setApartmentObject(flat:ApartmentObject) { 
    this._apart.setApartmentDetails(flat); 
} 

ApartmentService

Injectable() 
export class ApartmentService { 

    apartmentDetails:ApartmentObject 

    getApartmentDetails():Observable<ApartmentObject> { 
     return Observable.create((observer) => { 
      observer.next(this.apartmentDetails); 
      observer.complete(); 
     }); 
    } 

    setApartmentDetails(value:ApartmentObject) { 
     this.apartmentDetails = value; 
    } 
} 

ApartmentDetailComponent

constructor(private _apart:ApartmentService) 

get apartmentDetails() { 
    this._apart.getApartmentDetails().subscribe(data => { 
     this._apartmentDetails = data; 
    }); 
    return this._apartmentDetails; 
} 

을 onClickEvent 나는 또한 eventemitter와 함께이 문제를 해결하기 위해 노력

<p><strong>{{apartmentDetails.name || 'Musterwohnung'}}</strong></p> 

HTML 파일에서

0하지만 성공하지. 다음과 같은 더러운 수정 프로그램 만 작동합니다.

constructor(private _ref:ChangeDetectorRef) { 
    this._ref.detach(); 
    setInterval(() => { 
    this._ref.detectChanges(); 
    }, 300); 
} 

Answer 1

값을 실제로 읽을 수없는 문제가 있습니다.

먼저 서비스에서 - 값을 설정할 때 관찰 가능한 객체에 제공하는 대신 서비스의 인스턴스에서 수행합니다. observable은 값이 변경되었음을 알 수 없으므로 change (next) 이벤트를 내 보내지 않습니다. 이것이 ApartmentOverviewComponent. setApartmentObject()에없는 이유입니다. 관측 대상에 실제로 데이터를 공급하려면 대상을 사용해야합니다.

ApartmentDetailComponent에서이 간단한 시나리오 (데이터가 항상 동 기적으로 제공됨)에서는 시도하는 방식으로 값을 얻을 수 있습니다. 그러나 앞서 언급했듯이 데이터는 변경되지 않습니다. 또한 구성 요소 인스턴스의 _apartmentDetails 필드에 데이터를 저장하는 바늘입니다. 템플릿에서 관찰 가능을 사용할 수 있습니다.

실무 구현은 같다 :

@Injectable() 
class ApartmentService { 
    // BehaviorSubject is a type of an Observable that can be manually fed with data 
    // and returns it's last value to any subscriber. 
    apartmentDetails = new BehaviorSubject<ApartmentObject>({name: 'Musterwohnung'}); 

    // Instead of using a property of the service, just inform the 
    // subject about knew data and let it spread the change for you. 
    setApartmentDetails(value: ApartmentObject) { 
    this.apartmentDetails.next(value); 
    } 
} 

@Component({ 
    selector: 'overview-cmp', 
    // Side note: you don't need to .preventDefault() here. 
    template: `<a (click)="setApartmentObject({name: 'Shiny Aparament'})">click</a>` 
}) 
class ApartmentOverviewComponent { 
    constructor(private apartService: ApartmentService) {} 

    // Works same as before. 
    setApartmentObject(flat: ApartmentObject) { 
    this.apartService.setApartmentDetails(flat); 
    } 
} 

@Component({ 
    selector: 'details-cmp', 
    // Use the 'async' pipe to access the data stored in an Observable 
    // object. Also, to secure the code, use '?' to safely access the property. 
    template: `<p><strong>{{(details | async)?.name}}</strong></p>` 
}) 
class Apartament { 
    // This is the observable with data. 
    details: Observable<ApartmentObject>; 

    constructor(private apartService: ApartmentService) {} 

    // When component initialises, assign the observable data from the service 
    ngOnInit() { 
    this.details = this.apartService.apartmentDetails; 
    } 
}