Визуализируйте представление внутри iframe в Angular 6 и продолжайте использовать переменные шаблона

Question

В angularJS вы можете использовать $ compile для рендеринга представления в iframe, а также для сохранения переменных области видимости angularjs $ внутри iframe. Есть ли эквивалентная функциональность в Angular.IO?

AngularJS эквивалент в директиве:

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

Я хотел бы создать iframe, передать необходимый html для заполнения iframe и иметь возможность использовать язык шаблонов внутри html iframe.

Аналогично этому, но этот plunkr не работает. Он не отображает переменные в представлении iframe.

Обновление: найдено несколько руководств по использованию angularJS в машинописи, и это может сработать. В конечном счете, я хотел бы поделиться переменными между родителем и iframe, подобно тому, как $ scope в angularJS может быть разделен между родителем и iframe.

Answer 1

Вы можете получить iframe Window и внедрить переменную из углового компонента, вы можете добавить Subject, чтобы вы могли инициировать изменения ( FULL DEMO ) внутриiframe вот так:

Вот компонент шаблона

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

Надеюсь, это поможет.