Ionic2 시리즈는 DeepLinker를 사용하여 지정된 페이지 URL을 구현합니다.

Ionic2는 기본 앱과 유사한 페이지 탐색 방법을 사용하며 Angular2 라우팅을 지원하지 않습니다. 이 방법은 로컬 앱을 개발할 때 더 편리하지만, 순수 웹 페이지를 개발할 때 사용하면 조금 문제가 됩니다. 이 경우 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개의 페이지로 구성되어 있으며, 하나의 탭은 메인 페이지이고, 나머지 3개의 탭은 홈, 정보, 연락처입니다.

기본 사용법

DeepLinker는 IonicModule.forRoot 메서드에서 세 번째 매개변수로 사용됩니다.

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

The 배열의 객체는 URL과 페이지 간의 일치 관계를 구성하는 DeepLinkerConfig입니다. 일반적으로 다음과 같습니다.

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

즉, 홈페이지 페이지를 탐색할 때 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)에 전달하여 앱이 두 번째 탭으로 직접 이동한다는 것을 의미합니다.

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;
}
}
}

두 개의 변수를 추가한 다음 NavParams 매개변수를 통해 전달하고 selectTabIndex에 할당합니다.

tabs.html을 수정하고 Tabs 구성 요소에 바인딩을 추가합니다.

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

ionic Serve 명령을 실행하면 http가 열립니다. 자동: //localhost:8100/ 주소, 이제 새 창을 열고 http://localhost:8100/#/tabs/1을 입력합니다. 확인, 두 번째 탭으로 바로 이동합니다. 하루에 전화하십시오.

기본 기록

다른 페이지에서 내부 페이지로 직접 이동하는 경우 돌아가기를 클릭하면 어떤 페이지로 돌아가야 할까요? 예를 들어 푸시 알림에서 뉴스 세부정보 페이지로 이동할 때 뒤로를 클릭하면 홈 페이지로 돌아가야 합니다. 따라서 Ionic2는 defaultHistory 매개변수를 제공합니다. 페이지 기록 스택에 기록 페이지가 없으면 이 페이지로 돌아갑니다. 사용법은 다음과 같습니다.

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