android - 我们如何在 Angular 4 中通过原生 JavaScript 调用 Angular 函数

Question

在 Angular 1.x 中，我们可以使用 angular.element(appElement).scope() 获取 $scope，然后使用 $apply ()，让原生javascript可以直接调用angular函数或者双向绑定(bind)。使用 Angular 4 时，我们如何通过原生 javascript 或 android 原生调用 angular 函数或双向绑定(bind)。

例如:

web是angular 4开发的，在android webview中会用到，所以需要和android进行交互，如何处理交互？

Answer 1

我能想到很多方法，但从来没有读过手册中任何阐明最 Angular 方法的内容。

区域

您必须记住，Angular 在其引擎的核心使用区域和变化检测树。因此，任何外部访问都需要在该上下文中进行。

您必须在 Angular 区域中运行外部代码:

zone.run(() => {
      // do work here
});

如果您对任何将直接或间接影响模板表达式的数据进行更改，您将面临更改检测错误的风险。所以一个组件需要注入(inject)ChangeDetectorRef并调用markForCheck。

因此，如果您的代码在组件内部运行，但在 Angular 外部运行。你需要这样做:

zone.run(() => {
    // do work here.
    this.ChangeDetectorRef.markForCheck();
});

不过，这提出了问题。如何访问该组件？

访问 Angular

您必须引导您的 Angular 应用程序才能访问它。

当您启动 Angular 应用程序时，浏览器服务会向主模块返回一个 promise 。该主模块包含注入(inject)器，您可以从那里访问任何导出的服务。

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then((modRef: NgModuleRef<AppModule>) => {
         window.myGlobalService = modRef.injector.get(MyServiceClass);
    });

这会将服务类作为全局变量。您必须创建一个 API 来转发到 Angular 的区域。

@Injectable()
export class MyServiceClass {
     public dataEmitter: Subject<any> = new Subject();

     public constructor(private zone: NgZone) {}

     public fooBar(data: any): any {
         return this.zone.run(()=>{
             // do work here
             this.dataEmitter.next(data);
             return "My response";
         });
     }
}

您可以从服务中返回 zone.run 的结果。关键是 Angular 代码在正确的区域运行。

简单的组件单向绑定(bind)

单向数据绑定(bind)的最简单解决方案是只使用 DOM 的事件模块。

@Component({....})
export class MyComponent {
    @HostListener('example',['$event'])
    public onExample(event: Event) {
        console.log(event.fooBar);
    }
}

// else where in external JavaScript
var elem; // the DOM element with the component
var event = new Event('example', {fooBar: 'Hello from JS!'});
elem.dispatchEvent(elem);

我更喜欢这种方法，因为 Angular 像处理任何其他类型的事件(即点击事件)一样处理事件监听器

你也可以反过来做。让组件在其 ElementRef 上发出 DOM 事件以供外部 JavaScript 监听。这使得整个双向通信更加DOM标准。