角2 - IFRAME

Question

我越來越瘋狂試圖注入請求自定義標題注入自定義頁眉（類似'AUTH-TOKEN':'SomeToken123'）一對角4

我需要傳遞給iframe的頁面需要一些自定義標題參數。

任何人都可以請幫助我嗎？

foo.component.html

<iframe [hidden]="isLoading" class="full" #iframe [src]="secureSrc" (load)="onIframeLoad()" frameborder="0" ></iframe> 

component.ts

@Component({ 
    selector: 'app-foo', 
    templateUrl: './foo.component.html' 
}) 

export class FooComponent implements OnInit { 

    @ViewChild('iframe') iframe: ElementRef; 
    public isLoading: Boolean; 
    public secureSrc: SafeResourceUrl; 

    constructor(
     private sanitizer: DomSanitizer, 
     private renderer: Renderer2, 
     private router: Router 
    ) { } 

    public ngOnInit() { 
     this.isLoading = true; 

     this.secureSrc = this.getIframeURL(); 
    } 

    private getIframeURL(): SafeResourceUrl { 
     return this.sanitizer 
      .bypassSecurityTrustResourceUrl('https://iframe.address'); 
    } 

    public onIframeLoad(): void { 
     if (typeof this.iframe !== 'undefined') { 

      // Once iFrame Loaded 
      if (typeof this.token !== 'undefined') { 
       this.iframe 
        .nativeElement 
        .contentWindow 
        .postMessage({ 
         externalCommand: 'some-action', 
         parameter : 'action parameter' 
        }, '*'); 
      } 

      this.isLoading = false; 
     } 
    } 
} 

謝謝！

Answer 1

你可以這樣說：

1. 創建將與頭一起發送HTTP GET請求， ，預計BLOB響應的服務。
2. 在組件中使用該服務來設置iframe的src。
3. 從iframe中刪除[SRC] = 「secureSrc」，並只留下#iframe

。

// service 
import { Injectable } from '@angular/core'; 
import { ResponseContentType, Http, RequestOptions, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Subscriber } from 'rxjs/Subscriber'; 

@Injectable() 
export class UrlHelperService { 
    constructor(private http: Http) { 
    } 

    get(url: string): Observable<any> { 
     let options = new RequestOptions(); 
     options.headers = new Headers(); 
     options.headers.append('AUTH-TOKEN', 'SomeToken123'); 
     options.responseType = ResponseContentType.Blob; 

     return new Observable((observer: Subscriber<any>) => { 
      let objectUrl: string = null; 

      this.http 
       .get(url, options) 
       .subscribe(m => { 
        objectUrl = URL.createObjectURL(m.blob()); 
        observer.next(objectUrl); 
       }); 

      return() => { 
       if (objectUrl) { 
        URL.revokeObjectURL(objectUrl); 
        objectUrl = null; 
       } 
      }; 
     }); 
    } 
} 

// component 
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core'; 
import { UrlHelperService } from './url-helper.service'; 

@Component({ 
    selector: '', 
    templateUrl: './my-app.component.html' 
}) 
export class MyAppComponent implements OnInit { 
    @ViewChild('iframe') iframe: ElementRef; 

    constructor(private urlHelperService: UrlHelperService) { } 

    ngOnInit() { 
    this.urlHelperService.get('http://localhost/api/file/123') 
     .subscribe(blob => this.iframe.nativeElement.src = blob); 
    } 
}