在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<AppModule>) => { window.myGlobalService = modRef.injector.get(MyServiceClass); });
这会将服务类放置为全局变量.您必须创建一个转发到Angular区域的API.
@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代码在正确的区域中运行.
简易组件单向绑定
单向数据绑定的最简单解决方案是仅将事件模块用于DOM.
@Component({....})export class MyComponent { @HostListener('example',['$event']) public onExample(event: Event) { console.log(event.foobar); }}// else where in external JavaScriptvar elem; // the DOM element with the componentvar event = new Event('example', {foobar: 'Hello from Js!'});elem.dispatchEvent(elem);
我喜欢这种方法,因为Angular会像处理其他任何类型的事件(即click事件)一样处理事件监听器
您也可以采用其他方法.让组件在其ElementRef上发出DOM事件,以供外部JavaScript侦听.这使得整个双向通信成为更多的DOM标准.
总结以上是内存溢出为你收集整理的android-如何在angular 4中通过本机javascript调用角度函数全部内容,希望文章能够帮你解决android-如何在angular 4中通过本机javascript调用角度函数所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)