鸿蒙next摘要1

原创

已于 2024-11-09 09:25:26 修改 · 338 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #1024程序员节

于 2024-10-23 10:29:08 首次发布

1.@Inject

@Provide(‘pageInfos’)通常是用于声明一个提供方法，这个方法将提供一个名为pageInfos的可注入对象。'pageInfos’是一个字符串标识符，用于指定提供的对象的名称。在注入时，可以通过这个名称来获取对应的对象。MyComponent类通过@Inject注解注入了名为pageInfos的对象。在onInit方法中，可以直接使用这个对象。

import {
   
    Provide } from '@ohos:di';

@Provide('pageInfos')
export class PageInfoProvider {
   
   
  getPageInfos() {
   
   
    return {
   
   
      title: 'My Page',
      description: 'This is a sample page.'
    };
  }
}

import {
   
    Inject } from '@ohos:di';

export class MyComponent {
   
   
  @Inject('pageInfos')
  pageInfos;

  onInit() {
   
   
    console.log(this.pageInfos.title);
    console.log(this.pageInfos.description);
  }
}

2.@Consume

@Consume(‘pageInfos’)是一个注解，用于表示某个组件或类会消费（使用）一个名为pageInfos的注入资源。它和@Provide是相对应的。@Provide用于提供一个资源，而@Consume用于获取并使用这个被提供的资源。当你看到@Consume(‘pageInfos’)时，就知道这个组件正在从 DI 容器中获取之前通过@Provide(‘pageInfos’)提供的pageInfos相关的对象或数据。

   import {
   
    Consume } from '@ohos:di';
   import {
   
    Component } from '@ohos:react';
   // 假设这是一个简单的页面组件
   @Component
   export default class MyPageComponent {
   
   
       @Consume('pageInfos')
       pageInfos;
       render() {
   
   
           return (
               <div>
                   <h1>{
   
   this.pageInfos.title}</h1>
                   <p>{
   
   this.pageInfos.description}</p>
               </div>
           );
       }
   }

3.路由Navigation

@Entry
@Component
struct NavigationExample {
   
   
  @State TooTmp: ToolbarItem = {
   
   'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {
   
   }}
  //菜单配置
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()//页面栈,主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。
  private arr: number[] = [1, 2, 3];
  private arr: number[] = [1, 2, 3];

  @Builder
  PageMap(name: string) {
   
   //内部跳转匹配页面，必须配置
    if (name === "NavDestinationTitle1") {
   
   
      pageOneTmp()
    } else if (name === "NavDestinationTitle2") {
   
   
      pageTwoTmp()
    } else if (name === "NavDestinationTitle3") {
   
   
      pageThreeTmp()
    }
  }

  build() {
   
   
    Column() {
   
   
      Navigation(this.pageInfos) {
   
   //路由组件Navigation加pageInfos配置
        TextInput({
   
    placeholder: 'search...' })
          .width("90%")
          .height(40)
          .backgroundColor