在 Ionic 3 中为大屏幕显示多个页面答案

【问题标题】：Show multiple pages for large screen sizes in Ionic 3在 Ionic 3 中为大屏幕显示多个页面
【发布时间】：2017-05-09 20:24:53
【问题描述】：

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

为了在屏幕足够大的情况下保持菜单可见，我正在使用：

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

并隐藏选项卡：

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

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

是否可以在 ion-content 中加载两个页面？任何替代解决方案？

任何帮助将不胜感激！

【问题讨论】：

是的，只需使用页面的选择器。 <page1></page1> 和 <page2></page2 并找到一些 css 将它们彼此相邻而不是在彼此下方对齐
嗨 Ivaro18，你能写一个简单的例子吗？谢谢！

标签： ionic-framework ionic2 ionic3

【解决方案1】：

好的，我已经找到了解决方案。如果有人遇到同样的问题，我会在这里发布。

我们可以创建一个自定义组件：

ionic generate component name-of-component

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

<component-name></component-name>

如果你想使用延迟加载，你可以在 components 文件夹中创建一个 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{}

然后，在页面中，我们将导入 ComponentsModule。这将允许我们延迟加载任何组件：

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

希望这会有所帮助！

【讨论】：

你有这方面的例子吗？