diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts index dd7ea43727b7bb1a91977a724394be2720939d9f..11c89e642bcbfbe41362f391eb13d38ea5ae1e09 100644 --- a/src/app/play/play.component.ts +++ b/src/app/play/play.component.ts @@ -1,4 +1,13 @@ -import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; +import { + Component, + ElementRef, + ViewChild, + OnInit, + Input, + OnDestroy, + HostListener, + ApplicationRef, ChangeDetectorRef +} from '@angular/core'; import * as _ from 'lodash'; import { Label, @@ -13,6 +22,7 @@ import {debounceTime} from 'rxjs/operators'; import TWEEN from '@tweenjs/tween.js'; import {BehaviorSubject} from 'rxjs'; import { animate, keyframes, state, style, transition, trigger } from '@angular/animations'; +import { NzModalService } from 'ng-zorro-antd'; @@ -96,7 +106,9 @@ export class PlayComponent implements OnInit, OnDestroy { // æ•°æ® data; - constructor() { + constructor(private appRef: ApplicationRef, + private modalService: NzModalService, + private changeDetectorRef: ChangeDetectorRef) { this.rightAudio.src = 'assets/right.mp3'; this.rightAudio.load(); this.wrongAudio.src = 'assets/wrong.mp3'; @@ -115,33 +127,33 @@ export class PlayComponent implements OnInit, OnDestroy { ngOnInit() { this.data = { - "contentObj": { - "title": "ssssss", - "pic_id": "http://staging-teach.cdn.ireadabc.com/5502addf299f5f34dc181f993f81e311.png", - "options": [{ - "text": "111", - "pic_id": null, - "right": false, - "type": 1 + contentObj: { + title: 'ssssss', + pic_id: 'http://staging-teach.cdn.ireadabc.com/5502addf299f5f34dc181f993f81e311.png', + options: [{ + text: '111', + pic_id: null, + right: false, + type: 1 }, { - "text": "222", - "pic_id": null, - "right": true, - "type": 1 + text: '222', + pic_id: null, + right: true, + type: 1 }, { - "text": "333", - "pic_id": null, - "right": false, - "type": 1 + text: '333', + pic_id: null, + right: false, + type: 1 }, { - "text": "dddd", - "pic_id": null, - "right": false, - "type": 1 + text: 'dddd', + pic_id: null, + right: false, + type: 1 }], - "question_audio_id": "http://staging-teach.cdn.ireadabc.com/ab0872d9ed584c06181d41d9c7c4bf75.mp3" + question_audio_id: 'http://staging-teach.cdn.ireadabc.com/c203f5f5b855ba1e5f7149f91c7397ff.mp3' } - } + }; this.zoomIn = false; this.options = _.get(this.data.contentObj, 'options', []).map(item => { item.state = ''; @@ -158,27 +170,36 @@ export class PlayComponent implements OnInit, OnDestroy { if (data && typeof data === 'object') { console.log(data); this.data = data; - this.zoomIn = false; - this.options = _.get(this.data.contentObj, 'options', []).map(item => { - item.state = ''; - // Ken 2019-04-15 22:38 把showPic, showText的逻辑æ¢ä¸ºtype - if (_.isUndefined(item.type)) { - item.type = item.showPic ? this.OPTION_TYPE.PIC : this.OPTION_TYPE.TEXT; - } - return item; - }); + } + this.zoomIn = false; + this.options = _.get(this.data.contentObj, 'options', []).map(item => { + item.state = ''; + // Ken 2019-04-15 22:38 把showPic, showText的逻辑æ¢ä¸ºtype + if (_.isUndefined(item.type)) { + item.type = item.showPic ? this.OPTION_TYPE.PIC : this.OPTION_TYPE.TEXT; + } + return item; + }); const question_audio_id = _.get(this.data.contentObj, 'question_audio_id', null); // console.log('question_audio_id', question_audio_id); this.questionAudio.src = question_audio_id; this.questionAudio.load(); + this.changeDetectorRef.markForCheck(); + this.changeDetectorRef.detectChanges(); + this.refresh(); + if (window['air']) { window['air'].hideAirClassLoading(this.saveKey, this.data); } }, this.saveKey); } - + refresh() { + setTimeout(() => { + this.appRef.tick(); + }, 1); + } ngOnDestroy() { this.rightAudio.pause(); this.wrongAudio.pause(); @@ -218,7 +239,7 @@ export class PlayComponent implements OnInit, OnDestroy { } currentQuestionStatus() { const sts = this.playerState.asObservable(); - console.log(this.playerState.getValue().isPlaying) + console.log(this.playerState.getValue().isPlaying); } playQuestionAudio(e) { e.stopPropagation();