离子 2 / 角度 2 中的全局函数

如何

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

在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((; (，但是当使用(单击(函数从任何页面调用时，它不起作用。

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

基本上，它是

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

任何帮助将不胜感激，仍在弄清楚 Ionic 2。

您可以使用Directive .

请尝试如下操作。

将以下代码放在单独的指令文件中。(社交分享指令(;

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>

附加信息：

将值从组件传递到指令。

首页.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);        
   };
 }

您可以使用

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 { }

您的视图.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(); 
            }
  }

就像@Sampath提到的，一种方法是使用自定义提供程序。但是由于您的方法只是一个简单的方法，我认为您可以使用事件来代替。会是这样的：

在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 CLI 创建一个将用作共享组件的自定义组件，如下所示：

离子G组分/组分名称

其中 nameofcomponent 是要用于共享组件的名称

例如，请参阅本文，了解如何创建共享模块以包含共享组件

相关内容

最新更新

热门标签：