Generate

ionicでは各種Generateがコマンドから可能
html、css、ts、テストのテンプレートを自動で作ってくれるので利用しましょう

公式の通り
page、component、directive、service の作成ができる
Modalで表示するページを作る

$ ionic generate page modal/streaming

なぜか、generateすると下記のエラーが出るようになった

Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

未解決事件だが、実行する時のパスを src/appからにすると実行できるようになったが
なぜかプロジェクトのルートにファイルが作成されたので、そのファイルを src/app以下に置きなおした
更に、app-routing.modules.tsにて、モジュールのパスを管理しているので、そのファイルを開き正しく直した

Modalを呼び出す

とりあえず tab1にボタンを配置してそこから呼び出す事にした

tab1.page.ts

import { StreamingPage} from '../modal/streaming/streaming.page';

export class Tab1Page {
  constructor(
    private modalCtrl: ModalController,
  ) {    
  }

  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: StreamingPage,
    });
    return await modal.present();
  }
}

ModalControllerモジュールをimportし
presentModalインタフェースを追加した

tab1.page.htmlは下記のようにボタンを追加した

<ion-content [fullscreen]="true">
  <div class="ion-padding">
    <ion-button expand="block" fill="outline" (click)="presentModal()">Streaming</ion-button>
  </div>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

streamingビデオを再生させるために streaming.page.htmlに追記

<ion-content>
  <video width='950' height='700'
    src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8" controls
    autoplay playsinline webkit-playsinline></video>

</ion-content>

これで、Modalでビデオが再生できる

Closeボタン

モーダルをCloseするにはdismissを呼ぶだけだ

ボタンを追加し

streaming.pages.html

  <ion-toolbar>
    <ion-title>streaming {{test}}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
  </ion-buttons>

動作をつける
streaming.pages.ts

export class StreamingPage implements OnInit {
  @Input() test: string;

  close() {
    this.modalCtrl.dismiss();
  }
  ```  
  
  
# CSS  
  
cssClass: 'app-streaming', 
  
だけではダメのようで  modal-wrapperにもCSS適用した    
このあたりはまだよくわかってない・・・  
  
globals.css

.app-streaming .modal-wrapper { width: 100%; height: 100%; display: block;
border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }

C++幼女先輩

プログラミング成分多め

ionicでモーダルウインドウを作ってみた

Generate

Modalを呼び出す

Closeボタン