2017-05-09 19 views
1

サイドメニューと2つのイオンタブを持つシンプルなアプリケーションを構築しています。画面の大きさが十分であればIonic 3で大画面サイズの複数のページを表示

Large screens layout

が見えるメニューを保つために、私が使用しています:十分な広さの画面は、タブを忘れるとサイドで両方のページ側を開いたときに私は何をしようとしていること、です:

<ion-split-pane when="lg">

とタブを非表示にするには:

TSファイル:this.showTabs = platform.width() < 992;

を0

次に、HTMLファイルで、属性を追加するだけです。*ngIf="showTabs"

イオン含有量の中に2ページを読み込むことは可能ですか?代替ソリューションはありますか?

助けていただけたら幸いです!

+0

はい、ページのセレクタを使用してください。 ''と ' Ivaro18

+0

こんにちはIvaro18、これの簡単な例を書くことができますか?ありがとう! – emiliosg

答えて

1

私はこれに対する解決策を見つけました。私は誰かが同じ問題を経験する場合に備えてここに掲載します。

は、我々はしてカスタムコンポーネントを作成することができます

ionic generate component name-of-component 

コンポーネントは、イオンページ内に埋め込むことができます。ページでそれらを使用するには、あなただけの.module.tsページのでコンポーネントをインポートし、Ivaro18が述べたように、その後、部品のセレクタ名でHTMLタグを使用する必要があります。

<component-name></component-name> 

遅延読み込みを使用する場合は、のコンポーネント components.module.tsフォルダーを作成して、すべてのカスタムコンポーネントのインデックスとして機能させることができます。これは次のようになります。

import { NgModule } from '@angular/core'; 
import { IonicModule } from 'ionic-angular'; 

import { Component1 } from './component1/component1'; 
import { Component2 } from './component2/component2'; 
import { Component3 } from './component3/component3'; 

@NgModule({ 
    declarations: [ 
     Component1, 
     Component2, 
     Component3 
    ], 
    imports: [IonicModule], 
    exports: [ 
     Component1, 
     Component2, 
     Component3 
    ] 
}) 

export class ComponentsModule{} 

次に、PagesでComponentsModuleをインポートします。これにより、コンポーネントのどれかを遅延ロードすることができます。

<component-2-selector></component-2-selector> 

これは役に立ちます。

+0

これの例はありますか? –

関連する問題