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

Question

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

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

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

并隐藏选项卡：

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

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

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

如有任何帮助，我们将不胜感激！

Answer 1

好的，我已经找到了解决方案。我将 post 放在这里，以防有人遇到同样的问题。

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

ionic generate component name-of-component

组件可以嵌入到离子页面中。要在页面中使用它们，您只需在页面的 .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>

希望对您有所帮助！

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

Show multiple pages for large screen sizes in Ionic 3

ionic-framework

ionic2

ionic3