只需让组件在全局映射中注册自己，您就可以从那里访问它。

使用构造函数或ngOnInit()任何其他生命周期钩子来注册和ngOnDestroy()取消注册组件。

当您从 Angular 外部调用 Angular 方法时，Angular 无法识别模型更改。这就是 AngularsNgZone的用途。要获得对 Angular zone 的引用，只需将其注入构造函数

constructor(zone:NgZone) {
}

您也可以使其zone自身在全局对象中可用，也可以仅在区域内的组件内执行代码。

例如

calledFromOutside(newValue:String) {
  this.zone.run(() => {
    this.value = newValue;
  });
}

或使用全局区域参考，如

zone.run(() => { component.calledFromOutside(newValue); });

https://plnkr.co/edit/6gv2MbT4yzUhVUfv5u1b?p=preview

在浏览器控制台中，您必须从 切换到<topframe>，plunkerPreviewTarget....因为 Plunker 在iFrame. 然后运行

window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.callFromOutside('1');})

或者

window.angularComponentRef.zone.run(() => {window.angularComponentRef.componentFn('2');})

我就是这样做的。我的组件如下。不要忘记导入 NgZone。这是这里最重要的部分。NgZone 让 angular 理解外部环境。通过 zone 运行函数允许您从在 Angular zone 之外执行的任务重新进入 Angular zone。我们在这里需要它，因为我们正在处理不在角度区域内的外部呼叫。

 import { Component, Input , NgZone } from '@angular/core';
 import { Router } from '@angular/router';

    @Component({
        selector: 'example',
        templateUrl: './example.html',
    })
    export class ExampleComponent {
            public constructor(private zone: NgZone, private router: Router) {

//exposing component to the outside here
//componentFn called from outside and it in return calls callExampleFunction()
        window['angularComponentReference'] = {
            zone: this.zone,
            componentFn: (value) => this.callExampleFunction(value),
            component: this,
        };
    }

    public callExampleFunction(value: any): any {
        console.log('this works perfect');
        }
    }

现在让我们从外部调用它。在我的情况下，我想通过我的 index.html.my index.html 的脚本标签到达这里，如下所示。

<script>

//my listener to outside clicks
ipc.on('send-click-to-AT', (evt, entitlement) => 
electronClick(entitlement));;

//function invoked upon the outside click event

 function electronClick(entitlement){
//this is the important part.call the exposed function inside angular 
//component

    window.angularComponentReference.zone.run(() =
    {window.angularComponentReference.componentFn(entitlement);});
 }
</script>

如果您只是在开发人员控制台中键入以下内容并按回车键，它将调用公开的方法，并且“这很完美”将打印在控制台上。

 window.angularComponentReference.zone.run(() =>
{window.angularComponentReference.componentFn(1);});

权利只是在此处作为参数传递的一些值。

我正在检查代码，我遇到了可能不需要该区域的情况。它在没有 NgZone 的情况下运行良好。

在组件构造函数中这样做：

constructor(....) {
   window['fncIdentifierCompRef'] = {
      component  = this
   };
}

在根脚本中试试这个：

<script>
function theGlobalJavascriptFnc(value) {
  try {
    if (!window.fncIdentifierCompRef) {
      alert('No window.fncIdentifierCompRef');
      return;
    }
    if (!window.fncIdentifierCompRef.component) {
      alert('No window.fncIdentifierCompRef.component');
      return;
    }  
    window.fncIdentifierCompRef.component.PublicCmpFunc(value);
  } catch(ex) {alert('Error on Cmp.PublicCmpFunc Method Call')}  
}
</script>

这对我有用。

问题是 Angular 的组件被转译为不像常规 JavaScript 代码那样容易访问的module。访问module功能的过程取决于module的格式。

Angular2 类可以包含无需实例化新对象即可定义的静态成员。您可能希望将代码更改为以下内容：

@component({...})
class MyTest {
    private static text: string = '';
    public static setText(text:string) {
        this.text = text;
    }
}

超级简单的解决方案！！使用外部别名保存组件或函数

declare var exposedFunction;
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
    constructor(public service:MyService){
    exposedFunction = service.myFunction;
}

在 index.html 中添加头部

<script>
    var exposedFunction;
</script>

内部暴露的函数不要使用这个。如果需要参数，则必须使用闭包才能使其工作

这在 ionic 中特别有用，可以在网络而不是设备上测试设备通知