2016-06-30 10 views
0

변경 사항이 발생했음을 알리는 구성 요소에 문제가 있습니다.받은 이벤트의 구성 요소 변경 - angular2

이벤트 E (일부 서비스를 통해)를 방출하는 하나의 구성 요소 A가 있다고 가정 해 보겠습니다. 구성 요소 B는 해당 이벤트에 가입되어 있습니다. console.log가 구성 요소 B의 이벤트 및 특성을 수신하면 변경되었음을 알 수 있습니다.

그러나 구성 요소의 템플리트는 동일하게 유지됩니다.

내가 ChangeDetectorRef를 사용하고 changeDetectorRef.detectChanges()을 사용하면보기가 새로 고쳐집니다. 하지만 다음 오류가 계속 발생합니다 :

Attempt to use a destroyed view: detectChanges.

구성 요소를 사용하고 통지하려면 원하는 방식입니까? 더 좋은 점이 있나요?

여기에 내가 사용하고 코드의 간단한 예입니다 :이 구성 요소 B는

, 즉

import {Component, OnInit, ChangeDetectorRef} from '@angular/core'; 

import {LiveIndexService} from './services/live-index.service'; 
import {LiveNavigationService} from '../../services/live-navigation.service'; 

@Component({ 
    selector: 'live-index', 
    template: require('./index.html'), 
    providers: [BetradarService] 
}) 
@CanActivate(() => { 
    return areDependenciesFetched(); 
}) 
export class LiveIndexComponent implements OnInit { 

constructor(
    private _liveNavigationService: LiveNavigationService, 
    private _changeDetector: ChangeDetectorRef) {} 

public ngOnInit() { 
    this._liveNavigationService.sportSelectedEvent$.subscribe(selectedSport => { 
    this._selectedSport = selectedSport; 
    console.log(this._selectedSport); // I see it is changed, but if I omit next line, it's not working. 
    this._changeDetector.detectChanges(); 
}); 

} }

을 변경해야이는 구성 요소 A되는 이벤트를 발생시키는 서비스를 트리거합니다.

(210)

나는 서비스에서 다음과 같은 목적을 방출 :

import {Injectable, EventEmitter} from '@angular/core'; 

@Injectable() 
export class LiveNavigationService { 

    public sportSelectedEvent$: EventEmitter<any> = new EventEmitter<any>(); 

    public selectSport(sport) { 
     this.sportSelectedEvent$.emit(sport); 
    } 
} 

이 HTML

<div id="breadcrumb"> 
    <div class="dropdown"> 
    <div class="wrapper"> 
     <a class="name">{{ _selectedSport ? _selectedSport.name : 'Sport'}}</a> 
     <div class="icon"><span></span></div> 
    </div> 
    <div class="list"> 
     <div class="title">Sports</div> 
     <div class="list-item" [ngClass]="{selected: sport == _selectedSport}" (click)="_selectSport(sport)" *ngFor="let sport of _sportsWithMatches">{{ sport.name }}</div> 
    </div> 
</div> 

내가 RC1에 여전히 해요입니다.

+0

을 할 수있는 당신은 어디에서 이벤트를 방출합니까? 소켓은 어떻게 관련되어 있습니까? 문제는 소켓 API가 영역에 의해 패치되지 않아서 발생한 것으로 가정합니다. –

+0

답변이 업데이트되고 제목이 변경되었습니다. 처음에는 소켓에 대해 물어보고 싶었지만 각도 이벤트에 대해서도 그런 일이 일어나고 있음을 깨달았습니다. – Ned

+0

나는 소켓이 어떻게 관련되는지 아직도 볼 수 없다. 'selectSport'가 어디에서 호출 되었습니까? –

답변

1

나는 changeDetectorRef을 사용해야한다고 생각하지 않습니다. change detection strategy은 온 푸시로 설정되어 있지 않으므로
내비게이션이 완료된 후 로직을 내 보내면 코드가 작동한다고 생각합니다. 당신이 3.0.0 라우터 RC1 라우터

this._router.navigate(['Index']).then(()=>this._liveNavigationService.selectSport(sport);)

을 사용하는 경우

this._router.events.subscribe(e => { if(e instance of NavigationEnd && this.router.url == 'index') this._liveNavigationService.selectSport(sport);})

+0

안타깝게도보기가 변경되지 않았습니다./ – Ned

+0

dev 모드에서 실행 중이며 각도가 잘못되었을 수 있습니다. 그렇다면 알려주세요. 템플릿 조각을 보여줄 수 있다면 좋을 것 같습니다. –

관련 문제