Использование EventEmitter испускают не выполняет функцию

Question

Привет Я пытаюсь создать компонент loadding ящика с помощью эмиттеров событий здесь то, что я до сих пор:

Я создал http.service кинул, который все HTTP вызовы проходят бросил:

@Injectable() 
export class HttpService { 
    private http: Http; 

    @Output() ajaxStarted: EventEmitter<any> = new EventEmitter(); 

    constructor(http: Http) { 
     this.http = http; 
    } 

    public get(url: string): Observable<Response> { 
     this.ajaxStarted.emit(url); 

     return this.http.get(url); 
    } 
} 

Я создал LoadingBoxComponent с кодом ollowing:

@Component({ 
    selector: 'loading-box', 
    templateUrl: 'app/common/components/loading-box.view.html', 
    styleUrls: ['app/common/components/loading-box.style.css'] 
}) 
export class LoadingBoxComponent { 
    public isLoadingBoxHidden: boolean = true; 

    public showLoadingBox(event: any) { 
     this.isLoadingBoxHidden = false; 
    } 
} 

Это приложение/общие/компоненты/Погрузочно-box.view.html:

<div class="loading-box-container" 
    (ajaxStarted)="showLoadingBox($event)" 
    [ngClass]="{hidden: isLoadingBoxHidden }"> 
    <div class="loading-box-shadow"></div> 
    <div class="loading-box-element"> 
     <i class="fa fa-spinner fa-lg fa-spin"></i> 
    </div> 
</div> 

Я не размещаю здесь couse Я считаю это нерелевантным для текущего вопроса.

Ожидается, что здесь произойдет всякий раз, когда this.ajaxStarted.emit (url) получится вызванным Я ожидаю, что функция showLoadingBox будет выполнена из LoadBoxComponent.

Случается, что this.ajaxStarted.emit (url) выполняется, но showLoadingBox не достигается.

Что я делаю неправильно?

Answer 1

@Output() xxx:EventEmitter; должно быть в LoadingBoxComponent не в некоторой службе.

@Injectable() 
export class HttpService { 
    private http: Http; 

    ajaxStarted: EventEmitter<any> = new EventEmitter(); 

    constructor(http: Http) { 
     this.http = http; 
    } 

    public get(url: string): Observable<Response> { 
     this.ajaxStarted.emit(url); 

     return this.http.get(url); 
    } 
} 


@Component({ 
    selector: 'loading-box', 
    templateUrl: 'app/common/components/loading-box.view.html', 
    styleUrls: ['app/common/components/loading-box.style.css'] 
}) 
export class LoadingBoxComponent { 
    @Output() ajaxStarted: EventEmitter<any> = new EventEmitter(); 

    constructor(http:HttpService) { 
     http.ajaxStarted.subscribe(this.ajaxStarted.edmit); 
    } 

    public isLoadingBoxHidden: boolean = true; 

    public showLoadingBox(event: any) { 
     this.isLoadingBoxHidden = false; 
    } 
}