Die Ionic2-Serie verwendet DeepLinker, um die angegebene Seiten-URL zu implementieren

Ionic2 verwendet eine Seitennavigationsmethode ähnlich der nativen App und unterstützt kein Angular2-Routing. Diese Methode ist bei der Entwicklung lokaler Apps praktischer, bei der Entwicklung reiner Webseiten ist sie jedoch etwas problematisch. In diesem Fall kann der Router von Angular2 eine flexiblere Konfiguration bieten. Wenn es sich bei der Startseite beispielsweise um eine Tabs-Seite handelt, wie kann dann der erste Tab gesteuert werden, den der Benutzer sieht? Standardmäßig wird zum ersten Tab navigiert und die URL in der Adressleiste ändert sich beim Seitenwechsel nicht. Glücklicherweise bietet Ionic2 eine Routing-ähnliche DeepLinker-Funktion, die den oben genannten Zweck erreichen kann.

DeepLinker arbeitet mit NavController zusammen, aber Benutzer werden grundsätzlich nicht direkt mit diesem Ding interagieren. Dies ist nur erforderlich, wenn der Benutzer die URL verarbeiten muss. Wenn NavController nach der Verwendung von DeepLinker eine neue Seite pusht, sucht DeepLinker nach passenden URL-Einstellungen in der Konfiguration und aktualisiert die URL.

Unser Nachfrageszenario sieht so aus: Es gibt n Menüs in der Menüleiste des offiziellen WeChat-Kontos. Das Klicken auf verschiedene Menüs erfordert eine direkte Navigation zur entsprechenden Registerkarte unserer Seite, anstatt den Benutzer die Registerkarte auswählen zu lassen . . Lassen Sie uns über die spezifischen Methoden sprechen.

Erstellen Sie zunächst ein neues Ionic2-Projekt. Derzeit wurde die neueste CLI auf 2.1.12 und ionic-angular auf RC3 aktualisiert. Es wird dringend empfohlen, zu aktualisieren. Verwenden Sie den folgenden Befehl, um ein Tabs-Vorlagenprojekt zu erstellen:

ionic start TabsDemo tabs --v2

Standardmäßig wird ein Projekt mit drei Tab-Seiten erstellt. Es gibt hauptsächlich 4 Seiten, ein Tab ist die Hauptseite und die anderen drei Tabs sind „Home“, „Info“ und „Kontakt“.

Grundlegende Verwendung

DeepLinker wird in der IonicModule.forRoot-Methode als dritter Parameter verwendet:

imports: [
IonicModule.forRoot(MyApp, {}, {
links: []
})
]

The Das Objekt im Array ist DeepLinkerConfig, das die Übereinstimmungsbeziehung zwischen URL und Seite konfiguriert. Im Allgemeinen sieht es so aus:

imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]

Mit anderen Worten: Beim Durchsuchen der Homepage-Seite wird die URL zu http://examplesite/#/home/home

Parameter übergeben

Manchmal müssen Sie Parameter von der URL übergeben. Sie können Folgendes verwenden Das Formular:

links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]

Auf diese Weise kann der Benutzerparameter in der ts-Datei von DetailPage empfangen und verarbeitet werden. Es ist zu beachten, dass dieser Parameter von DeepLinker serialisierbar sein sollte, daher wird empfohlen, ihn auf eine Zeichenfolge oder Zahl zu setzen.

Realisieren Sie das Springen zum angegebenen Tab

Ändern Sie die Datei app.module.ts und ändern Sie die IonicModule.forRoot-Methode in den folgenden Code:

IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]
})

Das bedeutet, dass ein Parameter an die Tabs-Seite übergeben wird, z. B. http://examplesite/#/tabs/1, sodass die App direkt zum zweiten Tab springt.

Ändern Sie die tabs.ts-Datei in den folgenden Code:

export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
public tabId: number;
public selectTabIndex: number;
constructor(public params: NavParams) {
this.tabId = params.get("tabId");
if(this.tabId != undefined || this.tabId !=null)
{
this.selectTabIndex = this.tabId;
}
}
}

Fügen Sie zwei Variablen hinzu und übergeben Sie sie dann über die NavParams-Parameter und Weisen Sie sie selectTabIndex zu.

Ändern Sie tabs.html und fügen Sie eine Bindung zur Tabs-Komponente hinzu:

<ion-tabs selectedIndex={{selectTabIndex}}>

Führen Sie den Befehl ionic servo aus und http wird geöffnet Automatisch: //localhost:8100/ Adresse, jetzt neues Fenster öffnen, http://localhost:8100/#/tabs/1 eingeben, OK, direkt zum zweiten Tab springen. Machen Sie Schluss.

Standardverlauf

Es gibt eine andere Situation: Wenn Sie von einer anderen Seite direkt zu einer internen Seite navigieren, zu welcher Seite sollten Sie zurückkehren, wenn Sie auf „Zurück“ klicken? Wenn Sie beispielsweise von einer Push-Benachrichtigung zur Nachrichtendetailseite wechseln und auf „Zurück“ klicken, sollten Sie zur Startseite zurückkehren. Daher stellt Ionic2 den Parameter defaultHistory bereit, wenn im Seitenverlaufsstapel keine historische Seite vorhanden ist, wird zu dieser Seite zurückgekehrt. Die Verwendung ist wie folgt:

links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]