¿Cómo puedo configurar una función global a la que se pueda acceder desde todas las vistas?
En app.component.ts agregué un método simple
openShare() {console.log("button clicked")}y luego en mi navegación tengo
<button ion-button right (click)="openShare()"> <ion-icon name="md-share"></ion-icon> </button>Cuando intento acceder a esto desde cualquier página, obtengo lo siguiente.
self.context.openShare is not a functionSin embargo, se ejecuta bien si lo pongo directamente en el constructor (por ejemplo, this.openShare();), pero cuando llama desde cualquier página usando una función (clic), simplemente no funciona.
¿App.component.ts no es global? Pensé que aquí es donde lo colocaría, pero tal vez me estoy perdiendo algo.
Básicamente es una función para un botón simple en la navegación, aunque necesito que sea global ya que se usa en cada página.
Cualquier ayuda sería apreciada, aún descifrando Ionic 2.
Puede utilizar Directive .
Intente de la siguiente manera.
Coloque el siguiente código en un archivo de directiva separado. (social-sharing.directive.ts);
import { Directive, HostListener } from '@angular/core'; @Directive({ selector: '[socialSharing]' }) export class SocialSharing { constructor() { } @HostListener('click') onClick() { // Your click functionality } } Importarlo en app.module.ts y luego agregarlo a las declarations .
En HTML, simplemente agregue un attribute a cualquier elemento que sea el selector en su archivo de directiva.
<button ion-button right socialSharing> <ion-icon name="md-share"></ion-icon> </button>Información adicional:
Pasar valores de componente a directiva.
inicio.html
<button ion-button right [socialSharing]="property"> <ion-icon name="md-share"></ion-icon> </button>inicio.componente.ts
export class HomePage { property: string = 'some url'; constructor() {} }social-sharing.directive.ts
Importe Input junto con otros desde @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); }; }Uso de elementos en la directiva:
social-sharing.directive.ts
Importe ElementRef junto con otros desde @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); }; }Puede hacerlo fácilmente usando Providers . Cuando necesite usar esa funcionalidad (o proveedor), solo necesita inject en su componente relacionado. Eso es todo.
Método 1:
Puede crear un proveedor utilizando CLI.
> ionic g provider YourProvidersu-proveedor.ts
import { Injectable } from '@angular/core'; @Injectable() export class YourProvider { constructor() { } openShare() {console.log("button clicked")} }aplicación.módulo.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 { }tu-vista.ts
import { YourProvider } from '../../providers/your-provider'; export class YourViewPage{ constructor(public yourProvider : YourProvider) { } openShare(){ this.yourProvider.openShare(); } Método 2: crea una clase base abstract .
mi-clase-base.ts
export abstract class MyBaseClass { constructor() { } protected openShare():void { console.log("button clicked"); } }mi-vista.ts
export class MyViewPage extends MyBaseClass { constructor() { super(); } openShare(){ super.openShare(); } }Tal como mencionó @Sampath, una forma sería usar un proveedor personalizado. Pero dado que su método es simple, creo que puede usar Eventos en su lugar. Sería así:
En su archivo app.component.ts , suscríbase al nuevo evento:
import { Events } from 'ionic-angular'; constructor(public events: Events, ...) { // ... events.subscribe('social:share', () => { // your code... console.log("button clicked"); }); }Y luego, en cualquier otra página, simplemente publique el evento para ejecutar esa lógica:
function anotherPageMethod() { this.events.publish('social:share'); }