我发现了一个涉及bootstrapjs模态和angular2的奇怪问题.
我有一个绑定到bootstrap模式的html的组件:
// ... lots of imports here
@Component({
selector: 'scrum-sessions-modal',
bindings: [ScrumSessionService, ScrumSessionRepository, ScrumModuleDataContext, ElementRef]
})
@View({
templateUrl: 'templates/modals/scrumSessions.modal.html',
styleUrls: ['']
})
export class ScrumSessionsModalComponent {
private _elementRef: ElementRef;
public sessions: ScrumSession[];
constructor(scrumSessionsProxy: ScrumSessionsProxy, scrumSessionService: ScrumSessionService, elementRef: ElementRef) {
this._proxy = scrumSessionsProxy;
this._scrumSessionService = scrumSessionService;
this._elementRef = elementRef;
// This is the bootstrap on shown event where i call the initialize method
jQuery(this._elementRef.nativeElement).on("shown.bs.modal", () => {
this.initialize();
});
jQuery("#scrumSessionsModal").on("hidden.bs.modal", () => {
this.cleanup();
});
}
public initialize() {
// Start our hub proxy to the scrumsessionshub
this._proxy.start().then(() => {
// Fetch all active sessions;
this._scrumSessionService.fetchActiveSessions().then((sessions: ScrumSession[]) => {
// This console.log is being shown, however the sessions list is never populated in the view even though there are active sessions!
console.log("loaded");
this.sessions = sessions;
});
});
}
// Free up memory and stop any event listeners/hubs
private cleanup() {
this.sessions = [];
this._proxy.stop();
}
}
在这个模态中,我在构造函数中有一个事件监听器,用于检查何时显示模态.当它这样做时,它调用初始化函数,该函数将加载将在模态中显示的初始数据.
模态的html如下所示:
<div class="modal fade" id="scrumSessionsModal" tabindex="-1" role="dialog" aria-labelledby="scrumSessionsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Actieve sessies </h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<th>Id</th>
<th>Maker</th>
<th>Start datum</th>
<th>Aantal deelnemers</th>
</tr>
<tr *ngFor="#session of sessions">
<td>
{{ session.id }}
</td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
我遇到的问题是由fetchactivesessions函数填充的sessions变量不会在视图中更新.我在调用完成方法上放了一个调试器,并且调用了一个scrumsession对象的结果.
但是,当我删除on(“shown.bs.modal”)事件监听器并简单地将调用初始化()放在5秒的setTimeout函数内,然后打开模态时会正确填充会话列表.
它只发生在我将initialize调用放在bootstrap显示事件的回调中.当调用在jquery回调中时,它就像停止检查更改一样.有谁知道这笔交易是什么?我可以只在构造函数中调用初始化,但我宁愿调用bootstrap中显示的事件.
我已经发布了最新版本的应用程序,用于调试:http://gbscrumboard.azurewebsites.net/
解决方法:
通过易于使用的服务包含在解决方案之上:
更新:如果您使用的是rxjs-6,则需要进行重大更改
import { fromEvent } from 'rxjs';
..
并使用
..
fromEvent(document, BsEventsService.BS_COLLAPSIBLE_SHOWN);
代替
Observable.fromEvent(document, BsEventsService.BS_COLLAPSIBLE_SHOWN);
BS-events.service.ts
import { Subject, Observable, Subscription } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable() export class BsEventsService { private static BS_COLLAPSIBLE_SHOWN: string = 'shown.bs.collapse'; private static BS_COLLAPSIBLE_HIDDEN: string = 'hidden.bs.collapse';
constructor() {
this.registerEvent(BsEventsService.BS_COLLAPSIBLE_SHOWN);
this.registerEvent(BsEventsService.BS_COLLAPSIBLE_HIDDEN);
}
onCollapsibleShown(): Observable<Event> {
return Observable.fromEvent(document, BsEventsService.BS_COLLAPSIBLE_SHOWN);
}
onCollapsibleHidden(): Observable<Event> {
return Observable.fromEvent(document, BsEventsService.BS_COLLAPSIBLE_HIDDEN);
}
private registerEvent(event) {
var script = document.createElement('script');
script.innerHTML = "eventRelay('" + event + "');"
document.body.appendChild(script);
}
}
的index.html
<app-root></app-root>
..
<!-- relay bootstrap events to angular - start -->
<script>
function eventRelay(bs_event) {
$('body').on(bs_event, function ($event) {
const customEvent = document.createEvent('Event');
customEvent.initEvent(bs_event, true, true);
let target_id = '#' + $event.target.id;
$(target_id)[0].dispatchEvent(customEvent);
});
}
</script>
<!-- relay bootstrap events to angular - end -->
..
</body>
零件
import { BsEventsService } from './service/bs-events.service';
import { Subject, Observable, Subscription } from 'rxjs';
..
private onCllapsibleShownSubject: Subscription;
private onCllapsibleHiddenSubject: Subscription;
..
constructor(.., private bsEventsService: BsEventsService) {
..
}
ngOnInit() {
this.onCllapsibleShownSubject = this.bsEventsService.onCollapsibleShown().subscribe((event: any) => {
console.log('shown: ' + event.target.id);
});
this.onCllapsibleHiddenSubject = this.bsEventsService.onCollapsibleHidden().subscribe((event: any) => {
console.log('hidden: ' + event.target.id);
});
}
ngOnDestroy() {
this.onCllapsibleShownSubject.unsubscribe();
this.onCllapsibleHiddenSubject.unsubscribe();
}
原文地址:https://codeday.me/bug/20190717/1488552.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。