イオンピッカーアセンブリの一例（ionic4）

イオンピッカーコンポーネント上での公式文書Ionic4は、適切なサンプルコードを与えるものではありませんが、サンプルコードの効果は以下のgithubの接続を持っている右上隅のショーで、その場所は、このコードではなく、標準のイオンプロジェクト構造であるが、同じ原理を使用してここで私は、イオンのプロジェクトの文言を変更しました：

HTML：

< イオンボタン拡大= "ブロック" （クリック）= "openPicker（）" >点击</ イオンボタン>

JavaScriptを：

「@角度/コア」からインポート{コンポーネント、のOnInit} 。
インポート{PickerController} '@イオン/角度' ; 

@Component（{ 
  セレクタ： 'アプリ編集' 、
  templateUrl： './edit.page.html' 、
  styleUrls：[」./edit.page.scss' ] 
}）
エクスポートクラスEditPage実装のOnInit { 

  コンストラクタ（プライベートpickerController ：PickerController）{} 

  ngOnInit（）{ 
  } 

  openPicker（非同期公衆）{ 
    CONSTピッカー =を待つこの.pickerController.create（{ 
      ：カラムこの、.getColumnsを（） 
      ボタン[
        {
          テキスト： 'キャンセル' 、
          役割： 'キャンセル' 
        }、
        { 
          テキスト： 'OK' 、
          ハンドラ：（値） => { 
            にconsole.log（{$ `値[ 'COL-0' ]}`の.text）; 
          } 
        } 
      ] 
    }）; 

    のawait picker.present（）; 
  } 

  プライベート入出力のgetColumns（）{ 
    // 各コールを作成する必要がありリテラル対象列に直接ではなく、受信したパラメータでメソッドを作成するときに動的に作成され、問題がイオンピック新しいオブジェクト、オブジェクトのプロパティxxxのコンポーネントオブジェクトに即座に保存されます、ここでリターンthis.xxxによって、この方法は仕事をしない、スタイルを開くために二回目は正常ではないつながります。
    リターン[ 
      { 
        名： 'COL-0' 、
        オプション：[ 
          { 
            テキスト： "オプション1" 、
            値： 0 
          }、
          { 
            テキスト： "オプション2" 、
            値： 1である。
          }、
          { 
            テキスト： "オプション3。" 、
            値：2 
          } 
        ] 
      } 
    ]; 
  } 
}