Wie kann ich den Zugriff auf die Haupt-Komponente, die Funktionen von einer Seite navigiert in Ionic 2?
Ich habe eine Ionische v2-Anwendung mit dem folgenden Befehl:
ionic start my-app sidemenu --v2 --ts
.
Innerhalb der app.ts
Datei, ich habe einige Logik (Funktionen), um einige Dinge (wie das öffnen eines modalen und Pflege Staat für das, was die Seite im Menü anzeigen sollte). Wenn eine bestimmte Seite (z.B. pages/getting-started/getting-started.ts
) angezeigt wird, würde ich gerne die Wiederverwendung der gleichen Funktionen in app.ts
. Wie erhalte ich Zugriff auf Funktionen der app.ts
von einer Seite navigiert?
Meine app.ts
sieht wie folgt aus.
class MyApp {
@ViewChild(Nav) nav:Nav;
private rootPage:any = GettingStartedPage;
private pages:any;
constructor(platform:Platform) {
this.initializeApp();
this.pages = {
'GettingStartedPage': GettingStartedPage,
'AnotherPage': AnotherPage //more pages and modals
};
}
initializeApp() {
this.platform.ready().then(() => {
StatusBar.styleDefault();
});
}
openPage(page:string) {
//when a user clicks on the left menu items, a new page is navigated to
let component this.pages[page];
this.nav.setRoot(component);
}
openModal(page:string) {
//modals are opened here, there's more complicated logic
//but this serves to demonstrate my problem
let component = this.pages[page];
Modal.create(component);
}
}
ionicBootstrap(MyApp);
Meine getting-started.ts
sieht wie folgt aus.
export class GettingStartedPage {
constructor(
platform:Platform,
viewController:ViewController,
navController:NavController,
navParams:NavParams) {
}
buttonClicked() {
//i need to access app.ts openModal here
//how do i call a method on app.ts?
//like MyApp.openModal('SomeModal');
}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit einem shared-service, können Sie die Kommunikation über die gesamte Anwendung.
Erstellen Sie eine service-Klasse wie
Bieten es auf Ihrer app
Injizieren, um die
App
Komponente und eine Komponente, Richtlinie, oder service, den Sie möchten, um zu kommunizieren, um dieApp
Komponente vonIn der
App
Komponente für die BenachrichtigungenDetails siehe https://angular.io/docs/ts/latest/cookbook/component-communication.html
Mit Ionic-2, die Sie nutzen könnten Veranstaltungen für die Kommunikation zwischen den Komponenten. Zum Beispiel in Ihrer Funktion
buttonClicked()
könnte man ein Ereignis auslösenund hören, um es z.B. im Konstruktor der main-Klasse zum öffnen der modal:
Können Sie sogar senden von Daten mit dem Ereignis (hier:
thisPage
).in die Seite Komponente TS-Datei:
dann innerhalb der Seite, wo immer Sie wollen, Zugriff auf diese Funktion:
Alternativ können Sie entweder
Veranstaltungen
oder EventEmitter