鴻蒙ArkTS容器組件：Navigator

Navigator

路由容器組件，提供路由跳轉(zhuǎn)能力。

說(shuō)明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含子組件。

接口

Navigator(value?: {target: string, type?: NavigationType})

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
target	string	是	指定跳轉(zhuǎn)目標(biāo)頁(yè)面的路徑。
type	[NavigationType]	否	指定路由方式。默認(rèn)值：NavigationType.Push

NavigationType枚舉說(shuō)明

名稱	描述
Push	跳轉(zhuǎn)到應(yīng)用內(nèi)的指定頁(yè)面。
Replace	用應(yīng)用內(nèi)的某個(gè)頁(yè)面替換當(dāng)前頁(yè)面，并銷毀被替換的頁(yè)面。
Back	返回到指定的頁(yè)面。指定的頁(yè)面不存在棧中時(shí)不響應(yīng)。未傳入指定的頁(yè)面時(shí)返回上一頁(yè)。

屬性

名稱	參數(shù)	描述
active	boolean	當(dāng)前路由組件是否處于激活狀態(tài)，處于激活狀態(tài)時(shí)，會(huì)生效相應(yīng)的路由操作。
params	object	跳轉(zhuǎn)時(shí)要同時(shí)傳遞到目標(biāo)頁(yè)面的數(shù)據(jù)，可在目標(biāo)頁(yè)面使用[router.getParams()]獲得。
target	string	設(shè)置跳轉(zhuǎn)目標(biāo)頁(yè)面的路徑。目標(biāo)頁(yè)面需加入main_pages.json文件中。
type	[NavigationType]	設(shè)置路由方式。默認(rèn)值：NavigationType.Push`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

示例

// Navigator.ets
@Entry
@Component
struct NavigatorExample {
  @State active: boolean = false
  @State name: NameObject = { name: 'news' }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
        Text('Go to ' + this.name.name + ' page')
          .width('100%').textAlign(TextAlign.Center)
      }.params(new TextObject(this.name)) // 傳參數(shù)到Detail頁(yè)面

      Navigator() {
        Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
      }.active(this.active)
      .onClick(() = > {
        this.active = true
      })
    }.height(150).width(350).padding(35)
  }
}

interface NameObject {
  name: string;
}

class TextObject {
  text: NameObject;

  constructor(text: NameObject) {
    this.text = text;
  }
}

// Detail.ets
import router from '@ohos.router'

@Entry
@Component
struct DetailExample {
  // 接收Navigator.ets的傳參
  params: Record< string, NameObject > = router.getParams() as Record< string, NameObject >
  @State name: NameObject = this.params.text

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) {
        Text('Go to back page').width('100%').height(20)
      }

      Text('This is ' + this.name.name + ' page')
        .width('100%').textAlign(TextAlign.Center)
    }
    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

interface NameObject {
  name: string;
}

// Back.ets
@Entry
@Component
struct BackExample {
  build() {
    Column() {
      Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
      }
    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴