android如何在angular4中通过本机javascript调用角度函数

在Angular 1.x中,我们可以使用angular.element(appElement).scope()获得$scope,然后使用$apply(),以便本机Javascript可以直接调用angular函数或双向绑定.在Angular 4中,我们如何通过本地Javascript或android native调用angular函数或双向绑定.

例如 ：

该网络是由angular 4开发的,它将在android webview中使用,因此它需要与android进行交互,我该如何处理这种交互？

解决方法:

我可以想到很多方法,但从未阅读过手册中的任何内容,这些内容澄清了大多数Angular方法.

区域

您必须记住,Angular在引擎的核心使用区域和更改检测树.因此,任何外部访问都需要在这种情况下发生.

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

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


如果对将直接或间接影响模板表达式的任何数据进行更改,则存在更改检测错误的风险.因此,组件需要注入ChangeDetectorRef并调用markForCheck.

因此,如果您的代码在组件内部运行但在Angular外部运行.您需要这样做：

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


尽管如此,这还是提出了一个问题.我如何到达组件？

访问角度

您必须引导Angular应用程序,以便可以对其进行访问.

当您引导Angular应用程序时,浏览器服务会将诺言返回给主模块.该主模块包含注射器,您可以从那里访问任何导出的服务.

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


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

@Injectable()
export class MyServiceClass {
public dataEmitter: Subject = 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代码在正确的区域中运行.

简易组件单向绑定

单向数据绑定的最简单解决方案是仅将事件模块用于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会像处理其他任何类型的事件(即click事件)一样处理事件监听器

您也可以采用其他方法.让组件在其ElementRef上发出DOM事件,以供外部Javascript侦听.这使得整个双向通信成为更多的DOM标准.