【OpenHarmony應用開發】eTS通用屬性 - 元件辨別（二）

參考文檔：https://gitee.com/openharmony/docs/blob/5654c2b940ab3e2f4f0baf435e630c4ef3536428/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

擷取元件資訊

• getInspectorByKey(id: string): string

  擷取指定id的元件的所有屬性，不包括子元件資訊。

• getInspectorTree(): string

  擷取元件樹的所有屬性，包括子元件資訊。

getInspectorByKey與getInspectorTree方法可以使用，但在IDE會顯示報錯，建議@ts-ignore忽略錯誤

這裡我提供兩個方法，來幫助我們更好在Log裡面檢視元件資訊

//列印
log(data, level, parentName, componentId) {
    for (let k in data) {
      let obj = data[k]

      // 其他資料類型
      if (typeof obj == 'string' || typeof obj == 'number' || typeof obj == 'boolean') {
        console.info(`[${componentId}][${parentName}]【${k}】 ===> ${obj.toString()}`)
        continue
      }


      //空對象
      if (!Object.keys(obj).length) {
        console.info(`[${componentId}][${parentName}]【${k}】 ===> ${JSON.stringify(obj)}`)
        continue
      }

      //object
      this.log(obj, level + 1, `${parentName}->${k}`, componentId)
    }
}

// 列印元件資訊
logComponent(componentId: string) {
    // @ts-ignore
    let str = getInspectorByKey(componentId)
    try {
      let data = JSON.parse(str)
      this.log(data, 0, 'root', componentId)
    } catch (e) {
      console.log('無法找到元件')
    }
}

// 列印元件樹資訊
logComponentTree() {
    // @ts-ignore
    let str = getInspectorTree()
    try {
      let data = JSON.parse(str)
      this.log(data, 0, 'root', 'tree')
    } catch (e) {
      console.log('擷取元件樹失敗')
    }
}
           

檢視元件

Text('元件辨別發送事件示範')
        .fontSize(30)
        .margin({ bottom: 30 })
        .id('testComponent')
        .onAppear(() => {
          this.logComponent('testComponent')
        })
           

Text('元件辨別發送事件示範')
        .fontSize(30)
        .margin({ bottom: 30 })
        .id('testComponent')
        .onAppear(() => {
          this.logComponentTree()
        })