angular iframe添加请求头

在Angular中，如果你想要在一个嵌入式iframe中发送HTTP请求并自定义请求头，你可以使用`HttpClient`模块提供的服务。虽然直接操作iframe的DOM可能会有跨域限制，但在Angular里，你可以通过`ng-content`指令传递配置到嵌套组件来间接控制iframe的行为。

首先，确保你已经在项目中导入了`HttpClientModule`：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
  ],
})
export class AppModule {}

然后，在父组件中，设置一个服务来管理请求头，并将其注入到需要发送请求的组件：

@Injectable()
export class HttpHeadersService {
  private headers = new HttpHeaders({'Custom-Header': 'value'});

  getHeaders() {
    return this.headers;
  }
}

接下来，在嵌套的iframe组件中，注入`HttpClient`和`HttpHeadersService`，并在`ngOnInit`或其他适当的地方使用它们：

@Component({
  selector: 'app-iframed-component',
  template: `
    <iframe [src]="iframeSrc" #myIframe></iframe>
    <!-- ... -->
  `,
})
export class IframeComponent implements OnInit {
  @ViewChild('myIframe', {read: ElementRef}) iframeElement;

  constructor(private http: HttpClient, private headersService: HttpHeadersService) {}

  ngOnInit() {
    const iframeWindow = this.iframeElement.nativeElement.contentWindow;
    if (iframeWindow && iframeWindow.document) {
      const iframeDoc = iframeWindow.document;
      
      // 使用service提供的headers
      const customHeaders = this.headersService.getHeaders();
      let options = {
        headers: customHeaders,
        observe: 'response',
      };

      // 发送GET请求示例
      iframeDoc.getElementById('someElement').addEventListener('click', () => {
        this.http.get<any>(yourUrl, options).subscribe(response => {
          console.log('Response:', response);
        });
      });
    }
  }
}

在这个例子中，我们监听iframe内的元素点击事件，当点击触发时，从父组件的服务获取请求头并发送GET请求。记得替换`yourUrl`为你实际的URL。