Ionic 2 / Angular 2 中的全局函数

Posted 2023-03-13

【中文标题】Ionic 2 / Angular 2 中的全局函数

【英文标题】：global function in Ionic 2 / Angular 2

【发布时间】：2017-08-27 02:49:04

【问题描述】：

如何设置可以在所有视图中访问的全局函数？

在 app.component.ts 我添加了一个简单的方法

  openShare() console.log("button clicked") 

然后在我的导航中我有

  <button ion-button right (click)="openShare()">
  <ion-icon name="md-share"></ion-icon>
</button>

当我尝试从任何页面访问此内容时，我得到以下信息。

self.context.openShare is not a function

但是，如果我将它直接放在构造函数中（例如 this.openShare(); ），它确实执行得很好，但是当使用 (click) 函数从任何页面调用时，它就不起作用了。

app.component.ts 不是全局的吗？我认为这是我应该放置它的地方，但也许我错过了一些东西。

基本上它是导航上一个简单按钮的功能，但我需要它是全局的，因为它在每个页面上都使用。

任何帮助将不胜感激，仍在解决 Ionic 2 问题。

【问题讨论】：

尝试自定义指令。

任何示例代码我将如何做到这一点？

angular.io/docs/ts/latest/guide/attribute-directives.html

@HarishKommuri - 这也可能有效。如果有人有一个简单的例子，将不胜感激。我更直观，不要求写代码只是点击方法上的一个简单示例。

【参考方案1】：

您可以使用Directive。

尝试如下。

将以下代码放在单独的指令文件中。 (social-sharing.directive.ts)；

import  Directive, HostListener  from '@angular/core';

@Directive(
  selector: '[socialSharing]'
)
export class SocialSharing 

  constructor()  

  @HostListener('click') onClick() 
    // Your click functionality
  

将其导入app.module.ts，然后添加到declarations。

在 HTML 中，只需将 attribute 添加到指令文件中的 selector 元素即可。

<button ion-button right socialSharing>
 <ion-icon name="md-share"></ion-icon>
</button>

其他信息：

将值从组件传递到指令。

home.html

  <button ion-button right [socialSharing]="property">
    <ion-icon name="md-share"></ion-icon>
  </button>

home.component.ts

 export class HomePage 

   property: string = 'some url';
    constructor() 
 

social-sharing.directive.ts

从@angular/core 导入Input 以及其他人。

import  Directive, Input, HostListener  from '@angular/core';

@Directive(
   selector: '[socialSharing]'
)

export class SocialSharing 
  @Input('socialSharing') str: string;

  constructor() 

  @HostListener('click') onClick() 
     console.log(this.str);
  
;

  ngAfterInit() 
     console.log(this.str);
  ;

在指令中使用元素：

social-sharing.directive.ts

从@angular/core 导入ElementRef 以及其他人

 import  Directive, ElementRef, HostListener  from '@angular/core';

 @Directive(
   selector: '[socialSharing]'
 )

 export class SocialSharing 

   // Add ElementRef to constructor

   constructor(el: ElementRef) ;

   ngOnInit() 
      let elRef = this.el.nativeElement;
      console.log(elRef.innerHTML);        
   ;
 

【讨论】：

- 嘿，谢谢。这实际上很完美。很多帖子供想知道如何做到这一点的人使用。希望他们在这里找到你的答案。谢谢，非常感谢。

【参考方案2】：

您可以使用Providers 轻松做到这一点。当您需要使用该功能（或提供程序）时，您只需将inject 输入到您的相关组件中即可。就是这样。

方法一：

您可以使用 CLI 创建提供程序。

> ionic g provider YourProvider

your-provider.ts

 import  Injectable  from '@angular/core';

    @Injectable()
    export class YourProvider 

      constructor() 
      

       openShare() console.log("button clicked") 
    

app.module.ts

import  YourProvider  from "../pages/path";

    @NgModule(
      declarations: [
        MyApp,
      ],
      imports: [
        IonicModule.forRoot(MyApp),
       ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        ],
      providers: [ provide: ErrorHandler, useClass: IonicErrorHandler ,YourProvider  ]
    )

    export class AppModule  

your-view.ts

       import  YourProvider  from '../../providers/your-provider';

        export class YourViewPage

          constructor(public yourProvider : YourProvider) 

          

        openShare()
           this.yourProvider.openShare(); 
        

方法 2： 创建一个abstract 基类。

my-base-class.ts

export abstract class MyBaseClass 

  constructor() 
  

  protected openShare():void 
    console.log("button clicked"); 
  

my-view.ts

export class MyViewPage extends MyBaseClass 
  constructor()
  
     super();
  

       openShare()
               super.openShare(); 
            
  

【讨论】：

hmm.. 是的，这就是我现在设置的方式，但对于一个简单的函数来说，20 页以上的导入似乎太多了。这是唯一的方法吗？这是导航标题中的一个按钮，因此基本上在每个页面上都会调用。

感谢您的帮助。对抽象类感兴趣，可以尝试一下。

sure.希望你能与我们分享结果:)

【参考方案3】：

就像@Sampath 提到的那样，一种方法是使用自定义提供程序。但是由于您的方法只是一个简单的方法，我认为您可以改用Events。应该是这样的：

在您的app.component.ts 文件中，订阅新事件：

import  Events  from 'ionic-angular';

constructor(public events: Events, ...) 

  // ...

  events.subscribe('social:share', () => 

    // your code...
    console.log("button clicked");

  );

然后在任何其他页面中，只需发布​​事件即可执行该逻辑：

function anotherPageMethod() 
  this.events.publish('social:share');

【讨论】：

谢谢，这可能有效。尽管如此 - 我无法相信像导航栏这样全球性的东西，没有简单的方法来声明通用方法。这么多保持干燥。在 Ionic 1 中很简单。哦，好吧 - 非常感谢您的帮助。再次感谢。