从Angular2 Component调用Jquery

时间:2016-09-13 16:10:03

标签: twitter-bootstrap angular angular2-components

从Angular2组件调用DOM元素上的Jquery函数的首选方法是什么?我需要从组件函数打开一个Bootstrap Modal窗口。我在我的模板中有这个:

<div #httpErrorModal id="errorModal" role="dialog" aria-labelledby="basicModal" aria-hidden="true" class="modal fade" tabindex="-1">
    <div class="modal-dialog ">
        <div class="modal-content">
            <button (click)="hideHttpErrorModal()" type="button" class="close close-button" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&nbsp;</span>
            </button>
            <div class="modal-header">
                <h2>Opps, There Was An Error</h2>
                <!--</div>-->
                <div class="modal-body">
                    <div *ngIf="showErrorModal" class="row">
                        <div class="col-xs-12">
                            <div>
                                <p>Sorry there was an error while processing your request.</p>
                                <ul>
                                    <li><b>Url: </b>{{httpError.url}}</li>
                                    <li><b>Status Code: </b>{{httpError.statusCode}}</li>
                                    <li><b>Message: </b>{{httpError.message}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="evisit btn btn-primary" (click)="hideHttpErrorModal()">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

我正在从下面的showHttpErrorModal()打开模态。

export class AppComponent implements OnInit, OnDestroy {

    private httpError: HttpError;
    private httpErrorObs: any;
    private showErrorModal: boolean = false;

    @ViewChild('httpErrorModal') httpErrorBsModal: ElementRef;

    //temp work around for IE back button issue https://github.com/angular/angular/issues/7873
    constructor(private _applicationRef: ApplicationRef, private _router: Router,
        private _patientService: PatientService, private _configService: ConfigManagerService,
        private _httpErrorService: HttpErrorService) {

        _router.events.subscribe(() => {
            this._applicationRef.tick();
            setTimeout(() => {
                this._applicationRef.tick();
            }, 100);
        });
    }

    ngOnInit() {
        //subscribe to error service to handle http error events from main app component
        this.httpErrorObs = this._httpErrorService.errorSubject.subscribe(er => {
            // the observable has an empty object when it is first initialized, so dont do anything if there isn't a status code on the error obj
            if (er.statusCode) {
                this.onHttpError(er);
            }
        });
    }

    onHttpError(hError: HttpError) {
        console.log('in error observable delegate');
        this.httpError = hError;
        this.showErrorModal = true;
        this.showHttpErrorModal();
    }

    showHttpErrorModal() {
        window['jQuery'](this.httpErrorBsModal.nativeElement).modal('show');
    }

    hideHttpErrorModal() {
        window['jQuery'](this.httpErrorBsModal.nativeElement).modal('hide');
    }

    ngOnDestroy() {
        this.httpErrorObs.unsubscribe();
        this.showErrorModal = false;
        this.hideHttpErrorModal();
    }

}

它工作正常,但似乎这违背了有条不紊的做事方式......是否有更好的方法?

0 个答案:

没有答案