Me estoy volviendo loco tratando de inyectar un encabezado personalizado de solicitud (algo así como 'AUTH-TOKEN':'SomeToken123' ) en Angular 4.
Necesito pasar a la página iframe algunos parámetros de encabezado personalizados requeridos.
¿Alguien puede ayudarme?
foo.component.html
<iframe [hidden]="isLoading" class="full" #iframe [src]="secureSrc" (load)="onIframeLoad()" frameborder="0" ></iframe>componente.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; } } }¡Gracias!
Puedes hacerlo así:
.
// 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); } }