web-dev-qa-db-ja.com

Ionic 2 / Angular 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 out。

angulartypescriptionic2ionic3
9
limit

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

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

Providersを使用して簡単に行うことができます。その機能（またはプロバイダー）を使用する必要がある場合は、関連するコンポーネントにinjectするだけです。

方法1：

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(); 
            }
  }
8
Sampath

@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');
}
3
sebaferreras