LoginSignup
0

More than 5 years have passed since last update.

ion-router-outletのmainって何?

Last updated at Posted at 2018-12-06

この記事は、Ionic Advent Calendar 2018の7日目の記事です。

TL;DR

ion-menuを使う場合は

  • main属性
  • contentIdプロパティ

どちらかの指定が必須です。

<ion-menu>でメニューを作る

Ionic v4で下のようなサイドメニューのある画面を実装する際、

ion-menuを使ってこのように作っていくと思います。

<ion-menu>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="false">
        <ion-item>メニュー1</ion-item>
        <ion-item>メニュー2</ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

おや?

<ion-router-outlet main></ion-router-outlet>

mainとは何でしょう?

Ionicのリファレンスを見ても特に説明がありません。
https://beta.ionicframework.com/docs/api/menu/

気持ち悪いのでとりあえず消してみましょう。

<ion-router-outlet></ion-router-outlet>

すると...

メニューアイコンが消えてしまいました。これはどういうことでしょうか?

Ionicのソースコードを追う

<ion-menu>のソースコードには、

menu.tsx
const el = this.el;
const parent = el.parentNode as any;
const content = this.contentId !== undefined
  ? document.getElementById(this.contentId)
  : parent && parent.querySelector && parent.querySelector('[main]');

のようにquerySelector('[main]')で親要素からmainという属性を持つ要素を取得している部分があります。

<ion-menu></ion-menu>
<ion-router-outlet main></ion-router-outlet>

main属性はメニューの表示のために必要だったということですね。

気持ち悪いとか言ってごめんなさい :bow:

contentIdを使う

<ion-menu>と関連付けを行う方法はもう一つあります。

Ionic v4のAPIリファレンスには「contentId」を指定すると書かれてあります。
https://beta.ionicframework.com/docs/api/menu/

この場合、ion-router-outletに設定したものと同じIDをion-menuに渡します。

<ion-menu contentId="main"></ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>

( ´_ゝ`)。o(サンプルがmain属性を指定するパターンなので見落としそう...)

コードで明示したい場合はcontentIdを使うと良さそうですね。

おわりに

Ionicは現在ベータ版ですが、完成度が高いので十分期待できると思います。

ドキュメントや日本語情報はまだ十分とは言えないので、必要に応じてソースコードを見るのも良いでしょう。

詳しい話を聞いてみたいな〜という方は、来年1月に「Angular & Ionic Meetup Fukuoka」を開催しますので是非ご参加ください(宣伝)。
image.png
https://ionic-jp.connpass.com/event/111912/

明日は @umi_mori さんです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0