Ionic 2 / Angular 2中的全局函数 [英] global function in Ionic 2 / Angular 2

问题描述

如何设置可在所有视图中访问的全局功能？

How can I setup a global function that can be accessed throughout all views?

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

In app.component.ts I added a simple method

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

然后在我的导航中我有

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

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

When I try to access this from any page I get the following.

self.context.openShare is not a function

但是如果我将它直接放在构造函数中（例如this.openShare（）;），它确实执行正常，但是当使用（点击）函数从任何页面调用时它只是没有不行。

It does however execute fine if I put it directly in the constructor (e.g this.openShare(); ), but when calling from any page using a (click) function it just doesn't work.

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

Is app.component.ts not global? I thought this is where I would place it, but maybe I am missing something.

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

Basically its a function for a simple button on the nav, I need it to be global though since its used on every page.

任何帮助都会受到赞赏，仍然会将Ionic 2弄清楚。

Any help would be appreciated, still figuring Ionic 2 out.

推荐答案

您可以使用指令。

请尝试以下操作。

将以下代码放在单独的指令文件中。 （social-sharing.directive.ts）;

Put the following code in separate directive file. (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 ，然后添加到声明。

Import it into app.module.ts and than add to declarations.

在HTML中，只需将属性添加到任何元素。

In HTML, just add attribute to any element.

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

其他信息：

将值从组件传递到指令。

Passing values from component to directive.

home.html

home.html

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

home.component.ts

home.component.ts

 export class HomePage {

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

social -sharing.directive.ts

social-sharing.directive.ts

导入输入以及来自<$的其他人c $ c> @ angular / core 。

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

social-sharing.directive.ts

导入 ElementRef 以及其他来自 @ angular / core

 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);        
   };
 }

这篇关于Ionic 2 / Angular 2中的全局函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！