Bài 03: config,Platform,Storage,Performance(angular)

 

 Global config

To override the initial Ionic config for the app, provide a config in IonicModule.forRoot in the app.module.ts file.

 import { IonicModule } from '@ionic/angular';

  @NgModule({

    ...

    imports: [

      BrowserModule,

      IonicModule.forRoot({

        rippleEffect: false,

        mode: 'md'

      }),

      AppRoutingModule

    ],

    ...

  })

Trong ví dụ trên, chúng tôi đang tắt hiệu ứng gợn sóng của Material Design trên ứng dụng, cũng như buộc chế độ là Material Design.

Per-Component Config

Ionic Config không hoạt động, vì vậy bạn nên sử dụng thuộc tính của một thành phần khi bạn muốn ghi đè hành vi mặc định của nó hơn là đặt cấu hình của nó trên toàn cầu.

 import { IonicModule } from '@ionic/angular';

@NgModule({

  ...

  imports: [

    BrowserModule,

    IonicModule.forRoot({

      backButtonText: 'Go Back'

    }),

    AppRoutingModule

  ],

  ...

})

Điều này sẽ đặt văn bản mặc định cho ion-back-buttonthành Go Back. Tuy nhiên, nếu bạn thay đổi giá trị của backButtonTextcấu hình thành Do Not Go Back, ion-back-buttonvăn bản mặc định sẽ vẫn là mặc định Go Backvì thành phần đã được khởi tạo và hiển thị. Thay vào đó, bạn nên sử dụng thuộc texttính trên ion-back-button.

  <ion-back-button [text]="getBackButtonText()"></ion-back-button>

Trong ví dụ này, chúng tôi đã sử dụng của chúng tôi ion-back-buttontheo cách để văn bản có thể được cập nhật động nếu có thay đổi đảm bảo cho nó, chẳng hạn như thay đổi ngôn ngữ hoặc địa phương. Các getBackButtonTextphương pháp sẽ chịu trách nhiệm trả lại các văn bản chính xác.

Per-platform config

Cấu hình ion cũng có thể được đặt trên cơ sở từng nền tảng. Ví dụ: điều này cho phép bạn tắt hoạt ảnh nếu ứng dụng đang được chạy trong trình duyệt trên một thiết bị có khả năng chậm hơn. Các nhà phát triển có thể tận dụng các tiện ích Nền tảng để thực hiện điều này.
Vì cấu hình được đặt trong thời gian chạy, bạn sẽ không có quyền truy cập vào Truyền phụ thuộc nền tảng. Thay vào đó, bạn có thể sử dụng các chức năng cơ bản mà nhà cung cấp sử dụng trực tiếp.
Trong ví dụ sau, chúng tôi đang tắt tất cả hoạt ảnh trong ứng dụng Ionic của mình chỉ khi ứng dụng đang chạy trong trình duyệt web dành cho thiết bị di động. Cuộc isPlatform()gọi trả về truehoặc falsedựa trên nền tảng được chuyển vào. Hãy xem Tài liệu nền tảng để biết danh sách các giá trị có thể có.

 import { isPlatform, IonicModule } from '@ionic/angular';

  @NgModule({

    ...

    imports: [

      BrowserModule,

      IonicModule.forRoot({

        animated: !isPlatform('mobileweb')

      }),

      AppRoutingModule

    ],

    ...

})

Ví dụ tiếp theo cho phép bạn đặt một cấu hình hoàn toàn khác dựa trên nền tảng, quay trở lại cấu hình mặc định nếu không có nền tảng nào phù hợp:

  import { isPlatform, IonicModule } from '@ionic/angular';

  const getConfig = () => {

    if (isPlatform('hybrid')) {

      return {

        backButtonText: 'Previous',

        tabButtonLayout: 'label-hide'

      }

    }

   

    return {

      menuIcon: 'ellipsis-vertical'

    }

  }

  @NgModule({

    ...

    imports: [

      BrowserModule,

      IonicModule.forRoot(getConfig()),

      AppRoutingModule

    ],

    ...

  })

Cuối cùng, ví dụ này cho phép bạn tích lũy một đối tượng cấu hình dựa trên các yêu cầu nền tảng khác nhau:

  import { isPlatform, IonicModule } from '@ionic/angular';

 

  const getConfig = () => {

    let config = {

      animated: false

    };

   

    if (isPlatform('iphone')) {

      config = {

        ...config,

        backButtonText: 'Previous'

      }

    }

   

    return config;

  }

  @NgModule({

    ...

    imports: [

      BrowserModule,

      IonicModule.forRoot(getConfig()),

      AppRoutingModule

    ],

    ...

  })

Tùy chọn cấu hình

Dưới đây là danh sách các tùy chọn cấu hình mà Ionic sử dụng.

Cấu hình	Kiểu	Sự miêu tả
actionSheetEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-action-sheet, ghi đè "hoạt ảnh" mặc định.
actionSheetLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-action-sheet, ghi đè "hoạt ảnh" mặc định.
alertEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-alert, ghi đè "hoạt ảnh" mặc định.
alertLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-alert, ghi đè "hoạt ảnh" mặc định.
animated	boolean	Nếu true, Ionic sẽ bật tất cả hoạt ảnh và chuyển tiếp trên ứng dụng.
backButtonIcon	string	Ghi đè biểu tượng mặc định trong tất cả các <ion-back-button>thành phần.
backButtonText	string	Ghi đè văn bản mặc định trong tất cả các <ion-back-button>thành phần.
hardwareBackButton	boolean	Nếu true, Ionic sẽ phản hồi với nút quay lại phần cứng trong thiết bị Android.
infiniteLoadingSpinner	SpinnerTypes	Ghi đè loại spinner mặc định trong tất cả các <ion-infinite-scroll-content>thành phần.
loadingEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-loading, ghi đè "hoạt ảnh" mặc định.
loadingLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-loading, ghi đè "hoạt ảnh" mặc định.
loadingSpinner	SpinnerTypes	Ghi đè con quay mặc định cho tất cả các ion-loadinglớp phủ.
menuIcon	string	Ghi đè biểu tượng mặc định trong tất cả các <ion-menu-button>thành phần.
menuType	string	Ghi đè loại menu mặc định cho tất cả các <ion-menu>thành phần.
modalEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-modal, ghi đè "hoạt ảnh" mặc định.
modalLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-modal, ghi đè "hoạt ảnh" mặc định.
mode	Mode	Chế độ xác định kiểu nền tảng nào sẽ sử dụng cho toàn bộ ứng dụng.
navAnimation	AnimationBuilder	Ghi đè "hoạt ảnh" mặc định của tất cả ion-navvà ion-router-outlettrên toàn bộ ứng dụng.
pickerEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-picker, ghi đè "hoạt ảnh" mặc định.
pickerLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-picker, ghi đè "hoạt ảnh" mặc định.
popoverEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-popover, ghi đè "hoạt ảnh" mặc định.
popoverLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-popover, ghi đè "hoạt ảnh" mặc định.
refreshingIcon	string	Ghi đè biểu tượng mặc định trong tất cả các <ion-refresh-content>thành phần.
refreshingSpinner	SpinnerTypes	Ghi đè loại spinner mặc định trong tất cả các <ion-refresh-content>thành phần.
sanitizerEnabled	boolean	Nếu true, Ionic sẽ kích hoạt trình vệ sinh DOM cơ bản trên các thuộc tính thành phần chấp nhận HTML tùy chỉnh.
spinner	SpinnerTypes	Ghi đè con quay mặc định trong tất cả các <ion-spinner>thành phần.
statusTap	boolean	Nếu true, nhấp hoặc nhấn vào thanh trạng thái sẽ khiến nội dung cuộn lên đầu.
swipeBackEnabled	boolean	Nếu true, Ionic sẽ bật cử chỉ "vuốt để quay lại" trên ứng dụng.
tabButtonLayout	TabButtonLayout	Ghi đè "bố cục" mặc định của tất cả ion-bar-buttontrên toàn bộ ứng dụng.
toastEnter	AnimationBuilder	Cung cấp hoạt ảnh nhập tùy chỉnh cho tất cả ion-toast, ghi đè "hoạt ảnh" mặc định.
toastLeave	AnimationBuilder	Cung cấp hoạt ảnh rời tùy chỉnh cho tất cả ion-toast, ghi đè "hoạt ảnh" mặc định.

Platform(Nền Tảng)

cách sử dụng:

 import { Platform } from '@ionic/angular';

  @Component({...})

  export class MyPage {

    constructor(public platform: Platform) {

  

    }

  }

 

Phương thức: 

is(platformName: Platform) => boolean

Tùy thuộc vào nền tảng mà người dùng đang sử dụng, is(platformName)sẽ trả về true hoặc false. Lưu ý rằng cùng một ứng dụng có thể trả về true cho nhiều tên nền tảng. Ví dụ, một ứng dụng đang chạy từ một chiếc iPad sẽ trở lại đúng với tên nền tảng: mobile, ios, ipad, và tablet. Ngoài ra, nếu ứng dụng đang chạy từ Cordova thì cordovasẽ đúng.

Thông số:

Name	Type	Description
platformName	Platforms	Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet

Platforms

Dưới đây là bảng liệt kê tất cả các giá trị nền tảng có thể có cùng với các mô tả tương ứng.

Name	Type	Description
platformName	Platforms	Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet

platforms() => string[]
Tùy thuộc vào thiết bị bạn đang sử dụng, platformscó thể trả về nhiều giá trị. Mỗi giá trị có thể là một hệ thống phân cấp của các nền tảng. Ví dụ, trên một chiếc iPhone, nó sẽ quay trở lại mobile, iosvà iphone.
ready() => Promise<string>
Trả về một lời hứa khi nền tảng đã sẵn sàng và chức năng gốc có thể được gọi. Nếu ứng dụng đang chạy từ bên trong trình duyệt web, thì lời hứa sẽ giải quyết khi DOM sẵn sàng. Khi ứng dụng đang chạy từ một công cụ ứng dụng chẳng hạn như Cordova, thì lời hứa sẽ giải quyết khi Cordova kích hoạt devicereadysự kiện. Giá trị được phân giải là readySource, cho biết nền tảng đã được sử dụng.
Ví dụ: khi Cordova đã sẵn sàng, nguồn sẵn sàng đã phân giải là cordova. Giá trị nguồn sẵn sàng mặc định sẽ là dom. Điều readySourcenày rất hữu ích nếu các logic khác nhau sẽ chạy tùy thuộc vào nền tảng mà ứng dụng đang chạy. Ví dụ: chỉ có Tụ điện và Cordova mới có thể thực thi plugin thanh trạng thái, vì vậy web không nên chạy logic plugin thanh trạng thái.
isRTL() => boolean
Trả về nếu ứng dụng này đang sử dụng hướng ngôn ngữ từ phải sang trái hay không. Chúng tôi khuyên bạn nên index.htmltệp của ứng dụng đã được dirđặt giá trị thuộc tính chính xác , chẳng hạn như <html dir="ltr">hoặc <html dir="rtl">. W3C: Đánh dấu cấu trúc và văn bản từ phải sang trái trong HTML
isLandscape() => boolean
Trả về truenếu ứng dụng ở chế độ ngang.
isPortrait() => boolean
Trả về truenếu ứng dụng ở chế độ dọc.
width() => number
Nhận chiều rộng của khung nhìn của nền tảng bằng cách sử dụng window.innerWidth.
height() => number
Nhận chiều cao của khung nhìn của nền tảng bằng cách sử dụng window.innerHeight.
url() => string
Lấy url hiện tại.
testUserAgent(expression: string) => boolean
Trả về truenếu biểu thức được bao gồm trong chuỗi tác nhân người dùng.

Thông số

Tên	Kiểu	Sự miêu tả
biểu hiện	chuỗi	Chuỗi để kiểm tra tác nhân người dùng

Sự kiện

Pause:

Sự pausekiện phát ra khi nền tảng gốc đặt ứng dụng vào nền, thường là khi người dùng chuyển sang một ứng dụng khác. Sự kiện này phát ra khi ứng dụng Cordova / Tụ điện được đặt ở chế độ nền nhưng không kích hoạt trong trình duyệt web tiêu chuẩn.
Usage

this.platform.pause.subscribe(async () => {

    alert('Pause event detected');

  });

Resize
Sự resize kiện phát ra khi cửa sổ trình duyệt đã thay đổi kích thước. Điều này có thể là từ một cửa sổ trình duyệt được thay đổi kích thước vật lý hoặc từ một thiết bị thay đổi hướng.
Usage

 this.platform.resize.subscribe(async () => {

    alert('Resize event detected');

  });

Resume

Sự resumekiện xảy ra khi nền tảng gốc kéo ứng dụng ra khỏi nền. Sự kiện này phát ra khi ứng dụng Cordova / Tụ điện chạy ở chế độ nền nhưng không kích hoạt trong trình duyệt web tiêu chuẩn.
Usage

 this.platform.resume.subscribe(async () => {

    alert('Resume event detected');

  });

Storage

Ionic Secure Storage

Đối với các nhóm xây dựng các ứng dụng quan trọng hoặc yêu cầu hỗ trợ mã hóa, Ionic Secure Storage là giải pháp cao cấp chính thức của nhóm Ionic cung cấp hệ thống lưu trữ dữ liệu đa nền tảng hoạt động trên iOS và Android.

Nó giúp bạn dễ dàng tạo các ứng dụng Ionic có hiệu suất cao, sẵn sàng ngoại tuyến trên iOS, Android và web.Tìm hiểu thêm

@ionic/storage

Đối với các nhà phát triển không yêu cầu mã hóa hoặc hỗ trợ dữ liệu quan hệ, @ ionic / storage là một API khóa / giá trị nguồn mở để xây dựng các ứng dụng hoạt động trên các công cụ lưu trữ trên nhiều nền tảng.

Ngoài ra, Ionic Secure Storage có trình điều khiển hoạt động với API khóa / giá trị trong @ionic/storagekhi cung cấp hỗ trợ mã hóa và SQLite.Tìm hiểu thêm về @ ionic / Storage