使用EventEmitter Emit无法执行功能

Question

嗨，我正在尝试使用事件发射器创建一个loading-box组件，这是我到目前为止所拥有的：

我创建了一个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：

@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;
    }
}

这是app / common / components / loading-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>

我不是在这里发布，因为我认为这与当前问题无关。

我希望在这里发生的是每当this.ajaxStarted.emit（url）被调用时，我都希望showLoadingBox函数可以从LoadingBoxComponent执行。

发生的事情是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;
    }
}