### File

`src/app/profile/profile.page.ts`

### Metadata

selector | `app-profile`
styleUrls | `./profile.page.scss`
templateUrl | `./profile.page.html`

### Index

###### Properties

- days
- nickname

###### Methods

- backup
- changeLanguage
- clearCache
- clearStats
- goToHelpPage
- goToProfileInfo
- goToStatsReport
- restore
- share
- sync

### Constructor

`constructor(navCtrl: NavController)`
Defined in src/app/profile/profile.page.ts:11

Parameters :

Name | Type | Optional
navCtrl | `NavController` | No

### Methods

backup
`backup()`
Defined in src/app/profile/profile.page.ts:31
Returns : `void`

changeLanguage
`changeLanguage()`
Defined in src/app/profile/profile.page.ts:51
Returns : `void`

clearCache
`clearCache()`
Defined in src/app/profile/profile.page.ts:43
Returns : `void`

clearStats
`clearStats()`
Defined in src/app/profile/profile.page.ts:47
Returns : `void`

goToHelpPage
`goToHelpPage()`
Defined in src/app/profile/profile.page.ts:15
Returns : `void`

goToProfileInfo
`goToProfileInfo()`
Defined in src/app/profile/profile.page.ts:19
Returns : `void`

goToStatsReport
`goToStatsReport()`
Defined in src/app/profile/profile.page.ts:23
Returns : `void`

restore
`restore()`
Defined in src/app/profile/profile.page.ts:35
Returns : `void`

share
`share()`
Defined in src/app/profile/profile.page.ts:27
Returns : `void`

sync
`sync()`
Defined in src/app/profile/profile.page.ts:39
Returns : `void`

### Properties

days
Type : `number`
Default value : `123`
Defined in src/app/profile/profile.page.ts:11

nickname
Type : `string`
Default value : `'用户昵称'`
Defined in src/app/profile/profile.page.ts:10

    import { Component } from '@angular/core';
    import { NavController } from '@ionic/angular';

    @Component({
      selector: 'app-profile',
      templateUrl: './profile.page.html',
      styleUrls: ['./profile.page.scss'],
    })
    export class ProfilePage {
      nickname: string = '用户昵称';
      days: number = 123; // 模拟数据，可根据实际情况修改

      constructor(private navCtrl: NavController) {}

      goToHelpPage() {
        this.navCtrl.navigateForward('/help');
      }

      goToProfileInfo() {
        this.navCtrl.navigateForward('/profile-info');
      }

      goToStatsReport() {
        this.navCtrl.navigateForward('/stats-report');
      }

      share() {
        // 分享功能实现
      }

      backup() {
        // 备份功能实现
      }

      restore() {
        // 恢复功能实现
      }

      sync() {
        // 云同步功能实现
      }

      clearCache() {
        // 清除缓存功能实现
      }

      clearStats() {
        // 清除统计数据功能实现
      }

      changeLanguage() {
        // 语言设置功能实现
      }
    }

    <ion-header>
      <ion-toolbar>
        <ion-title>我的</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="goToHelpPage()">
            <ion-icon name="help-circle-outline"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item (click)="goToProfileInfo()">
          <ion-avatar slot="start">
            <img src="assets/img/avatar.png" alt="头像">
          </ion-avatar>
          <ion-label>
            <h2>{{nickname}}</h2>
            <p>已坚持打卡{{days}}天</p>
          </ion-label>
        </ion-item>

        <ion-item (click)="goToStatsReport()">
          <ion-label>统计报告</ion-label>
          <ion-icon slot="end" name="bar-chart-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="share()">
          <ion-label>分享</ion-label>
          <ion-icon slot="end" name="share-social-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="backup()">
          <ion-label>备份</ion-label>
          <ion-icon slot="end" name="cloud-upload-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="restore()">
          <ion-label>恢复</ion-label>
          <ion-icon slot="end" name="cloud-download-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="sync()">
          <ion-label>云同步</ion-label>
          <ion-icon slot="end" name="sync-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="clearCache()">
          <ion-label>清除缓存</ion-label>
          <ion-icon slot="end" name="trash-bin-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="clearStats()">
          <ion-label>清除统计数据</ion-label>
          <ion-icon slot="end" name="stats-chart-outline"></ion-icon>
        </ion-item>

        <ion-item (click)="changeLanguage()">
          <ion-label>语言设置</ion-label>
          <ion-icon slot="end" name="language-outline"></ion-icon>
        </ion-item>
      </ion-list>
    <ion-content>

`./profile.page.scss`

    ion-item {
        --background: #ffffff;
        --color: #000000;
        --border-color: #f4f4f4;
        --border-width: 1px;
        --min-height: 50px;
        --padding-start: 10px;
        --padding-end: 10px;
        --inner-padding-start: 10px;
        --inner-padding-end: 10px;
        --inner-padding-top: 5px;
        --inner-padding-bottom: 5px;
      }

      ion-avatar img {
        width: 100%;
        height: auto;
        border-radius: 50%;
      }

      ion-label {
        h2 {
          font-size: 1.2em;
          margin: 0;
          padding: 0;
        }
        p {
          font-size: 0.9em;
          color: gray;
        }
      }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""