Ionic2 シリーズは DeepLinker を使用して指定されたページ URL を実装します
- 高洛峰オリジナル
- 2016-12-06 10:23:311489ブラウズ
Ionic2 はネイティブ アプリと同様のページ ナビゲーション方法を使用し、Angular2 ルーティングをサポートしません。この方法はローカル アプリを開発する場合には便利ですが、純粋な Web ページを開発する場合には少し問題があります。この場合、Angular2 のルーターはより柔軟な構成を提供します。たとえば、ホームページがタブ ページの場合、ユーザーに表示される最初のタブを制御するにはどうすればよいでしょうか?デフォルトでは、最初のタブに移動し、ページが切り替わってもアドレス バーの URL は変わりません。幸いなことに、Ionic2 は上記の目的を達成できるルーティングのような DeepLinker 機能を提供します。
DeepLinker は NavController と連携して動作しますが、ユーザーは基本的にこれを直接操作することはありません。これは、ユーザーが URL を処理する必要がある場合にのみ必要です。 DeepLinker を使用した後、NavController が新しいページをプッシュすると、DeepLinker は構成内で一致する URL 設定を探し、URL を更新します。
私たちの需要シナリオは次のようなものです。WeChat 公式アカウントのメニュー バーには n 個のメニューがあり、さまざまなメニューをクリックすると、ユーザーにタブを選択させるのではなく、ページの対応するタブに直接移動する必要があります。具体的な方法についてお話しましょう。
まず、新しい Ionic2 プロジェクトを作成します。現在、最新の CLI は 2.1.12 にアップグレードされており、ionic-angular は RC3 にアップグレードされているため、更新することを強くお勧めします。次のコマンドを使用して、タブ テンプレート プロジェクトを作成します:
ionic start TabsDemo tabs --v2
デフォルトでは、3 つのタブ ページを持つプロジェクトが作成されます。主に 4 つのページがあり、1 つのタブがメイン ページ、他の 3 つのタブがホーム、概要、連絡先です。
基本的な使用法
DeepLinker は、IonicModule.forRoot メソッドで 3 番目のパラメーターとして使用されます:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: []
})
]
配列内のオブジェクトは DeepLinkerConfig で、URL とページ間の一致関係を構成します。これは次のようなものです:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
]
})
]
つまり、HomePage ページを閲覧するとき、URL は http://examplesite/#/home/home になります
パラメータを渡す
場合によってはこれも必要ですURL からパラメータを転送するには パラメータを渡すには、次の形式を使用できます:
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user' }
]
このようにして、ユーザーパラメータを DetailPage の ts ファイルで受け取って処理できます。このパラメータは DeepLinker によってシリアル化できる必要があるため、文字列または数値に設定することをお勧めします。
指定されたタブへのジャンプを実現します
app.module.ts ファイルを変更し、IonicModule.forRoot メソッドを次のコードに変更します:
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
]
})
ここでの意味は、パラメータをタブ ページに渡すことです。 http://examplesite/#/tabs/1 のように、アプリは 2 番目のタブに直接ジャンプします。
tabs.ts ファイルを次のコードに変更します:
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;
}
}
}
2 つの変数を追加し、NavParams を通じて渡されたパラメーターを取得し、それらを selectTabIndex に割り当てます。
tabs.html を変更し、Tabs コンポーネントにバインディングを追加します。
<ion-tabs selectedIndex={{selectTabIndex}}>
ionicserve コマンドを実行すると、http://localhost:8100/ アドレスが自動的に開きます。新しいウィンドウを開いて http と入力します。 :// /localhost:8100/#/tabs/1、OK、2 番目のタブに直接ジャンプします。もう終わりにしましょう。
デフォルトの履歴
他のページから内部ページに直接移動した場合、「戻る」をクリックしたときにどのページに戻る必要があるかという別の状況もあります。たとえば、プッシュ通知からニュースの詳細ページに移動したときに、「戻る」をクリックすると、トップ ページに戻る必要があります。したがって、Ionic2 は、ページ履歴スタックに履歴ページがない場合、このページに戻ります。使用方法は次のとおりです:
links: [
{ component: HomePage, name: 'Home', segment: 'home' }
{ component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]