Question

我正在尝试在弹出模式显示时绑定图像或视频/音频源，数据来自服务器，但问题是，它无法正常工作。我甚至试图访问该元素并使用@ViewChild设置其值，但它不断抛出错误＆＃34; navtiveElement＆＃34;未定义。

这是我的HTML代码 `

<form #ManageForm="ngForm" novalidate id="ManageForm" class="form-horizontal" >
                                    <app-modal #DetailsModal [CustomClassName]="DynamicClassName">
                                        <div class="app-modal-header">
                                            <button type="button" class="close" (click)="CloseModal()">&times;</button> 
                                             {{ DataName }}
                                        </div>
                                        <div class="app-modal-body">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-lg-8">
                                                        <img *ngIf="FileType == 'IMAGE'" src= {{ imgurl }}  class="imgpreview" />

                                                        <video class="video-js vjs-default-skin audio_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #audioplayer *ngIf="FileType == 'AUDIO'">
                                                        <source src="" type="audio/mp3" #audioplayersource/>
                                                        <p class="vjs-no-js"> text/message to display <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                                                      </video>

                                                      <video class="video-js vjs-default-skin video_preview" controls preload="auto" width="100%" height="100%" data-setup='{"example_option":true}' #videoplayer *ngIf="FileType == 'VIDEO'">
                                                      <source src="" type="video/mp4" #videoplayersource/>
                                                      <p class="vjs-no-js">Some message<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                      </p>
                                                    </video>
                                                    </div>
                                                 </div>
                                            </div>
                                        </div>
                                    </app-modal>
                                </form>

`

这是组件文件：

  `
   // necessary imports 

 @ViewChild('audioplayer') public audioplayer;
    @ViewChild('audioplayersource') public audioplayersource;
    @ViewChild('videoplayer') public videoplayer;
    @ViewChild('videoplayersource') public videoplayersource;

MediaAsset(data : any){
    this.DynamicClassName = "modalWidthCustom";
    this.ids = data.id;
    this.DetailsModal.show();
    this.SignedUrl(this.ids);
  }

SignedUrl(id: number){
    const headers = new Headers({ 'Content-Type': 'application/json' });
    headers.append('Authorization', this.AuthenticationToken);
    // define vieo project url
    const APIURL = this.ENDPointURL + 'sourceFiles/' + id;
    this.http.get(APIURL, { headers: headers }).toPromise()
    .then((response: Response) => {
        var a = response.json();
        let SourceFile = a._links.sourceFile.href;
        let SignedPURL =  SourceFile + '/signedURL';
        let FileType = a.sourceFileType;
        this.http.get(SignedPURL,{headers : headers}).toPromise()
        .then((response: Response) => {
          let SignedUrl = response.json();

          let FinalURL;
          if(SignedUrl.status == 'OK'){
            FinalURL = SignedUrl.result.url;

              if(FileType == 'AUDIO'){

                 this.audioplayersource.nativeElement.setAttribute('src', FinalURL);
                 this.audioplayer.nativeElement.load();

              }else if(FileType == 'VIDEO'){
                 this.videoplayersource.nativeElement.setAttribute('src', FinalURL);
                 this.videoplayer.nativeElement.load();

              }else{
                this.Dataimgurl = "https://dummyimage.com/600x400/000/fff";
              }

          }
        })
    }).catch(e => {
      console.log(JSON.stringify(e));
    });
  }
    `

我得到了变量中的值，但是在模态弹出之后无法在源中设置它。请帮助我如何设置src值。

Answer 1

如果您使用Angular的外部URL，请务必使用：

yourSrcBindVariable = this.sanitizer.bypassSecurityTrustResourceUrl('http://foo');

而不是

yourSrcBindVariable = 'http://foo';

Angular documentation

中有关Angular DomSanitizer的更多信息

或this related question。

Answer 2

我明白了。我将Sourcelink存储到一个变量中，然后将该变量传递给Source，就像这样

ggplot(activeDF,aes(xvar,factor(label)))+
  geom_tile(aes(fill=value),colour='white')+ 
  scale_x_continuous(breaks=round(seq(0,7)))+
  scale_fill_gradient(high=brewer.pal(10,'PiYG')[8],low='white',na.value = 'white')

然后我使用生命周期钩子来加载像这样的视频或音频

 <source [src]="Sourcelink" type="audio/mp3" #audioplayersource/>

单击

2 个答案: