Angular 2 - 在 iframe 上注入自定义标头

Question

尝试将请求自定义标头（类似于'AUTH-TOKEN':'SomeToken123'）注入到 Angular 4 上，我快疯了。

我需要将一些必需的自定义标头参数传递给 iframe 页面。

谁能帮帮我？

foo.component.html

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

组件.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);
  }
}