在Ionic 3中显示大屏幕尺寸的多个页面

Question

我正在构建一个带侧边菜单和两个离子标签的简单应用程序。我想要做的是，当屏幕足够宽时，忘记标签并将两个页面并排打开：

如果屏幕足够大，要保持菜单可见，我正在使用：

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

隐藏标签：

TS文件：this.showTabs = platform.width() < 992;

然后，在HTML文件中，我只添加了属性：*ngIf="showTabs"

是否可以在离子内容中加载两页？任何替代方案？

任何帮助将不胜感激！

Answer 1

好的，我已经为此找到了解决方案。我会在这里发布，以防有​​人遇到同样的问题。

我们可以使用以下方法创建自定义组件：

ionic generate component name-of-component

组件可以嵌入离子页面中。要在页面中使用它们，您只需在页面的 .module.ts 中导入组件，然后使用带有组件选择器名称的HTML标记，如Ivaro18所述：

<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>

希望这有帮助！