在Angular 6的iframe中渲染视图并继续使用模板变量 [英] Render view inside iframe in Angular 6 and continue to use template variables

问题描述

在angularJS中，您可以使用$ compile在iframe中渲染视图，并将angularjs $ scope变量保留在iframe中. Angular.IO中是否有等效的功能?

In angularJS, you could use $compile to render a view in an iframe as well as keep the angularjs $scope variables within the iframe. Is there an equivalent functionality in Angular.IO?

等效于指令中的AngularJS:

AngularJS equivalent in a directive:

var $body = angular.element($element[0].contentDocument.body);
var template = $compile(contents)($scope);
$body.append(template);

我想渲染一个iframe，传递必要的html来填充iframe，并能够在iframe html中使用模板语言.

I would like to render an iframe, pass the necessary html to populate the iframe and be able to use the template language inside the iframe html.

与此类似，但是此插件无法正常工作.它不会在iframe视图中呈现变量.

Similar to this but, this plunkr isn't working. It doesn't render the variables in the iframe view.

更新:找到了一些有关如何在打字稿中使用angularJS的教程，可能会起作用.最终，我想在父代和iframe之间共享变量，类似于在父代和iframe之间共享angularJS中的$ scope的方式.

Update: Found some tutorials on how to use angularJS in typescript and that might work. Ultimately, I would like to share variables between the parent and iframe, similar to how $scope in angularJS can be shared between parent and iframe.

推荐答案

您可以获取iframe Window并从Angular组件中注入变量，您可以注入Subject以便触发更改( 完整演示 ):

You can get the iframe Window and inject a variable from the Angular component, you might to inject a Subject so you can trigger changes (FULL DEMO) inside the iframe like this:

这是模板组件

<hello name="{{ name }}"></hello>
<button (click)="sendData()">Click Here</button>
<iframe #iframe frameborder="1" width="100%" height="50%"></iframe>

这是逻辑:

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

const iframeCode = `
  <h1>Hello World</h1>

  <script type="text/javascript">
    if (dataFromParent) {
      // Subscribe to the Subject so you can trigger changes from Angular
      dataFromParent.subscribe(res => {
        document.querySelector('h1').innerHTML = res;
      })
    }
  </script>
`

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  data$: Subject<string> = new Subject('');
  @ViewChild('iframe') iframe: ElementRef;

  name = 'Angular';

  ngOnInit() {
    this.setIframeReady(this.iframe);
  }

  sendData() {
    this.data$.next('From parent to iframe');
  }

  private setIframeReady(iframe: ElementRef): void {
    const win: Window = iframe.nativeElement.contentWindow;

    // Pass the variable from parent to iframe
    win['dataFromParent'] = this.data$;

    const doc: Document = win.document;
    doc.open();
    doc.write(iframeCode);
    doc.close()
  }
}

此外，如果您希望从iframe与父级进行通信，则可以使用 CustomEvent .

Also, if you want to communicate from iframe to parent you could use CustomEvent.

希望有帮助.

这篇关于在Angular 6的iframe中渲染视图并继续使用模板变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！