Bài 33: Navigation Tìm hiểu ion-nav, ion-nav-link

 

  ion-nav

Nav là một thành phần độc lập để tải các thành phần tùy ý và đẩy các thành phần mới vào ngăn xếp.

Không giống như Router Outlet, Nav không bị ràng buộc với một bộ định tuyến cụ thể. Điều này có nghĩa là nếu chúng tôi tải một thành phần Nav và đẩy các thành phần khác vào ngăn xếp, chúng sẽ không ảnh hưởng đến bộ định tuyến tổng thể của ứng dụng. Điều này phù hợp với các trường hợp sử dụng mà bạn có thể có một phương thức, phương thức này cần điều hướng phụ của riêng nó, mà không làm cho nó bị ràng buộc với URL ứng dụng.

 

Properties

animated
Description	Nếu true, điều hướng sẽ tạo hoạt ảnh cho quá trình chuyển đổi của các thành phần.
Attribute	animated
Type	boolean
Default	true
animation
Description	Theo mặc định, hoạt ảnh ion-navchuyển đổi giữa các trang dựa trên chế độ (ios hoặc material design). Tuy nhiên, thuộc tính này cho phép tạo chuyển đổi tùy chỉnh bằng cách sử dụng các AnimateBuilderhàm.
Type	((baseEl: any, opts?: any) => Animation) | undefined
root
Description	Root NavComponent để tải
Attribute	root
Type	Function | HTMLElement | ViewController | null | string | undefined
rootParams
Description	Bất kỳ tham số nào cho thành phần gốc
Type	undefined | { [key: string]: any; }
swipeGesture
Description	Nếu thành phần điều hướng sẽ cho phép vuốt để quay lại.
Attribute	swipe-gesture
Type	boolean | undefined

Events

Name	Description
ionNavDidChange	Sự kiện được kích hoạt khi điều hướng đã thay đổi các thành phần
ionNavWillChange	Sự kiện được kích hoạt khi điều hướng sẽ thay đổi các thành phần

Menthods

canGoBack
Description	Trả về truenếu chế độ xem hiện tại có thể quay trở lại.
Signature	canGoBack(view?: ViewController | undefined) => Promise<boolean>
getActive
Description	Nhận chế độ xem đang hoạt động.
Signature	getActive() => Promise<ViewController | undefined>
getByIndex
Description	Nhận chế độ xem ở chỉ mục được chỉ định.
Signature	getByIndex(index: number) => Promise<ViewController | undefined>
getPrevious
Description	Xem trước.
Signature	getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>
insert
Description	Chèn một thành phần vào ngăn xếp điều hướng tại chỉ mục được chỉ định. Điều này rất hữu ích để thêm một thành phần tại bất kỳ điểm nào trong ngăn xếp điều hướng.
Signature	insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
insertPages
Description	Chèn một mảng các thành phần vào ngăn xếp điều hướng tại chỉ mục được chỉ định. Thành phần cuối cùng trong mảng sẽ được khởi tạo dưới dạng một dạng xem và chuyển động để trở thành dạng xem hiện hoạt.
Signature	insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
pop
Description	Bật một thành phần ra khỏi ngăn xếp điều hướng. Điều hướng trở lại từ thành phần hiện tại.
Signature	pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
popTo
Description	Bật đến một chỉ mục cụ thể trong ngăn xếp điều hướng.
Signature	popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
popToRoot
Description	Điều hướng trở lại thư mục gốc của ngăn xếp, bất kể cách đó bao xa.
Signature	popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
push
Description	Đẩy một thành phần mới vào ngăn xếp điều hướng hiện tại. Chuyển bất kỳ thông tin bổ sung nào dưới dạng một đối tượng. Thông tin bổ sung này có thể truy cập thông qua NavParams.
Signature	push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
removeIndex
Description	Loại bỏ một thành phần khỏi ngăn xếp điều hướng tại chỉ mục được chỉ định.
Signature	removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
setPages
Description	Đặt các chế độ xem của ngăn xếp điều hướng hiện tại và điều hướng đến chế độ xem cuối cùng. Theo mặc định, hoạt ảnh bị tắt, nhưng chúng có thể được bật bằng cách chuyển các tùy chọn đến bộ điều khiển điều hướng. Các tham số điều hướng cũng có thể được chuyển đến các trang riêng lẻ trong mảng.
Signature	setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
setRoot
Description	Đặt gốc cho ngăn xếp điều hướng hiện tại thành một thành phần.
Signature	setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

ion-nav-link

Một liên kết điều hướng được sử dụng để điều hướng đến một thành phần được chỉ định. Các thành phần có thể được chuyển đến bằng cách forward, backhoặc như là một rootthành phần.

Nó là hình thức yếu tố gọi push(), pop()và setRoot()các phương pháp trên bộ điều khiển chuyển hướng.

 Methods

canGoBack
Description	Thành phần để điều hướng đến. Chỉ được sử dụng nếu routerDirectionlà "forward"hoặc "root".
Signature	component
Type	Function | HTMLElement | ViewController | null | string | undefined
getActive
Description	Dữ liệu bạn muốn chuyển tới thành phần dưới dạng đạo cụ. Chỉ được sử dụng nếu "routerDirection"là "forward"hoặc "root".
Signature	undefined | { [key: string]: any; }
getByIndex
Description	Hoạt ảnh chuyển tiếp khi điều hướng đến một trang khác.
Signature	((baseEl: any, opts?: any) => Animation) | undefined
getPrevious
Description	Hướng chuyển đổi khi điều hướng đến trang khác.
Signature	router-direction
Type	"back" | "forward" | "root"
Default	'forward'