在 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.

与此类似，但是此 plunkr 不起作用.它不会在 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代码>，以便您可以在 iframe 内触发更改(完整演示)像这样:

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 通信到父级，您可以使用 自定义事件.

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

希望对您有所帮助.

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