Config

Ionic Config provides は、アプリケーション全体でコンポーネントのプロパティをグローバルに変更する方法を提供します。アプリのmode、タブボタンのレイアウト、アニメーションなどを設定できます。

Global Config

アプリのデフォルトのIonicコンフィグをオーバーライドするには、独自のカスタム設定を IonicModule.forRoot(...) に指定します。利用可能な設定キーは IonicConfig インターフェースで確認することができます。

For example, to disable ripple effects and default the mode to Material Design:

app.module.ts

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

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      rippleEffect: false,
      mode: 'md'
    })
  ],
  ...
})

コンポーネント単位のコンフィグ

Ionic Configはリアクティブではありません。コンポーネントがレンダリングされた後にコンフィグの値を更新すると、以前の値が適用されます。リアクティブな値が必要な場合は、configを更新するのではなく、コンポーネントのプロパティを使用することが推奨されます。

Not recommended

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

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      // Not recommended when your app requires reactive values
      backButtonText: 'Go Back'
    })
  ],
  ...
})

Recommended

<ion-back-button [text]="backButtonText"></ion-back-button>

@Component(...)
class MyComponent {
  backButtonText = this.config.get('backButtonText');

  constructor(private config: Config) { }

  localeChanged(locale: string) {
    if (locale === 'es_ES') {
      this.backButtonText = 'Devolver';
    }
  }

}

プラットフォームごとの設定Per-Platform Config

Ionic Configは、プラットフォームごとに設定することもできます。例えば、遅い可能性のあるデバイス上のブラウザでアプリを実行している場合、アニメーションを無効にすることができる。開発者は、プラットフォーム・ユーティリティーを利用してこれを実現することができます。

configは実行時に設定されるため、Platform Dependency Injectionにはアクセスできません。代わりに、プロバイダが直接使用する基本関数を使用できます。

次の例では、アプリケーションがモバイルWebブラウザで実行されている場合にのみ、Ionicアプリケーションのすべてのアニメーションを無効にしています。 isPlatform () 呼び出しは、渡されたプラットフォームに基づいて true または false を返します。Platform Documentation で利用可能な値をご覧ください。

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

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      animated: !isPlatform('mobileweb')
    })
  ],
  ...
})

プラットフォームごとの設定とフォールバック機能により、不一致のプラットフォームにも対応:

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

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      backButtonText: 'Previous',
      tabButtonLayout: 'label-hide'
    }
  }

  return {
    menuIcon: 'ellipsis-vertical'
  }
}
@NgModule({
  ...
  imports: [
    IonicModule.forRoot(getConfig())
  ],
  ...
})

プラットフォームごとの設定上書き:

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

const getConfig = () => {
  let config = {
    animated: false
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous'
    }
  }

  return config;
}
@NgModule({
  ...
  imports: [
    IonicModule.forRoot(getConfig())
  ],
  ...
})

Methods

get

Description	Returns a config value as an any. Returns null if the config is not defined.
Signature	get(key: string, fallback?: any) => any

Examples

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

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const mode = config.get('mode');
  }
}

getBoolean

Description	Returns a config value as a boolean. Returns false if the config is not defined.
Signature	getBoolean(key: string, fallback?: boolean) => boolean

Examples

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

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
  }
}

getNumber

Description	Returns a config value as a number. Returns 0 if the config is not defined.
Signature	getNumber(key: string, fallback?: number) => number

Examples

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

@Component(...)
class AppComponent {
  constructor(config: Config) {
    const keyboardHeight = config.getNumber('keyboardHeight');
  }
}

Interfaces

Configオプション

以下はIonicが使用する設定オプションのリストです。

Config	Type	Description
actionSheetEnter	AnimationBuilder	Provides a custom enter animation for all ion-action-sheet, overriding the default "animation".
actionSheetLeave	AnimationBuilder	Provides a custom leave animation for all ion-action-sheet, overriding the default "animation".
alertEnter	AnimationBuilder	Provides a custom enter animation for all ion-alert, overriding the default "animation".
alertLeave	AnimationBuilder	Provides a custom leave animation for all ion-alert, overriding the default "animation".
animated	boolean	If true, Ionic will enable all animations and transitions across the app.
backButtonDefaultHref	string	Overrides the default value for the defaultHref property in all <ion-back-button> components.
backButtonIcon	string	Overrides the default icon in all <ion-back-button> components.
backButtonText	string	Overrides the default text in all <ion-back-button> components.
hardwareBackButton	boolean	If true, Ionic will respond to the hardware back button in an Android device.
infiniteLoadingSpinner	SpinnerTypes	Overrides the default spinner type in all <ion-infinite-scroll-content> components.
loadingEnter	AnimationBuilder	Provides a custom enter animation for all ion-loading, overriding the default "animation".
loadingLeave	AnimationBuilder	Provides a custom leave animation for all ion-loading, overriding the default "animation".
loadingSpinner	SpinnerTypes	Overrides the default spinner for all ion-loading overlays.
menuIcon	string	Overrides the default icon in all <ion-menu-button> components.
menuType	string	Overrides the default menu type for all <ion-menu> components.
modalEnter	AnimationBuilder	Provides a custom enter animation for all ion-modal, overriding the default "animation".
modalLeave	AnimationBuilder	Provides a custom leave animation for all ion-modal, overriding the default "animation".
mode	Mode	The mode determines which platform styles to use for the whole application.
navAnimation	AnimationBuilder	Overrides the default "animation" of all ion-nav and ion-router-outlet across the whole application.
pickerEnter	AnimationBuilder	Provides a custom enter animation for all ion-picker, overriding the default "animation".
pickerLeave	AnimationBuilder	Provides a custom leave animation for all ion-picker, overriding the default "animation".
platform	PlatformConfig	Overrides the default platform detection methods.
popoverEnter	AnimationBuilder	Provides a custom enter animation for all ion-popover, overriding the default "animation".
popoverLeave	AnimationBuilder	Provides a custom leave animation for all ion-popover, overriding the default "animation".
refreshingIcon	string	Overrides the default icon in all <ion-refresh-content> components.
refreshingSpinner	SpinnerTypes	Overrides the default spinner type in all <ion-refresh-content> components.
sanitizerEnabled	boolean	If true, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
spinner	SpinnerTypes	Overrides the default spinner in all <ion-spinner> components.
statusTap	boolean	If true, clicking or tapping the status bar will cause the content to scroll to the top.
swipeBackEnabled	boolean	If true, Ionic will enable the "swipe-to-go-back" gesture across the application.
tabButtonLayout	TabButtonLayout	Overrides the default "layout" of all ion-bar-button across the whole application.
toastDuration	number	Overrides the default duration for all ion-toast components.
toastEnter	AnimationBuilder	Provides a custom enter animation for all ion-toast, overriding the default "animation".
toastLeave	AnimationBuilder	Provides a custom leave animation for all ion-toast, overriding the default "animation".
toggleOnOffLabels	boolean	Overrides the default enableOnOffLabels in all ion-toggle components.