角度2 - 私は、iframeのページにいくつかの必要なカスタムヘッダパラメータを渡す必要が角度4.</p> <p>上へのiframe

Question

私は、リクエストカスタムヘッダを注入しようとしているクレイジー取得しています

にカスタムヘッダーを注入（'AUTH-TOKEN':'SomeToken123'のようなもの） 。

誰でもお手伝いできますか？

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リクエストを送信するサービスを作成し とブロブ応答を期待しています。
2. コンポーネントでこのサービスを使用してiframeのsrcを設定します。
3. のiframeから[ソース] = "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); 
    } 
}