如何从 iframe 以角度运行组件的方法作为其容器答案

【问题标题】：How to run a component's method in angular from iframe as its container如何从 iframe 以角度运行组件的方法作为其容器
【发布时间】：2021-01-23 11:42:48
【问题描述】：

这里是角码
testing.component.ts

import { Component, NgZone, OnInit } from '@angular/core';
import {data} from '../../assets/data.js';
import { IPost } from '../_models/IPost.js';

import {WindowRefService} from '../WindowRef.service';


@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
  
  constructor() { }

  ngOnInit(): void { }

  callInIframe() {
    console.log('Call In Iframe');
  }

}

在常规方式中，此类代码不会在 iframe 之类的任何容器中午餐，但是我想在 iframe 中午餐。像这样的东西：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body> 
   <!--Angular app load in iframe , below code -->
    <iframe src="/" frameborder="0" width="100%" height="900px"></iframe>
    <script>
        **I want to Call Angular method here**
    </script>
</body>
</html>

如何在 index.html 的脚本标签中调用 callInIframe()。 @gzoechi

【问题讨论】：

在 index.html 中添加 iframe 有什么具体原因吗？如果没有，您可以在组件 HTML 中添加 iframe，然后您可以在加载 iframe 时触发组件 ts 文件中的方法
angular 应用程序必须在 iframe 级别使用一些库，并且这些库不能导入到 angular 应用程序中，所以我必须在 iframe 中导入应用程序。 @sunilbaba

标签： javascript angular iframe

【解决方案1】：

您可以在主组件的模板上添加iframe而不是index.html

app.component.html

<hello name="{{ name }}"></hello>
<p>
    this is an iframe for may website on an angular project
</p>
<iframe src="https://mansourcodes.com/"></iframe>

参见示例

https://stackblitz.com/edit/angular-ivy-nqec9u?file=src/app/app.component.html

【讨论】：

angular 应用程序必须在 iframe 级别使用一些库，并且这些库不能导入到 angular 应用程序中，所以我必须在 iframe @MansourAlnasser 中导入应用程序