从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"> </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();
}
}
它工作正常,但似乎这违背了有条不紊的做事方式......是否有更好的方法?