Question

在我的应用中使用两种布局，一种用于移动设备，另一种用于浏览器。在特定页面上我使用选项卡在两个页面之间导航，但在浏览器环境中，我希望这两个页面一起显示在两列中。为此，我试过这样的事情：

<ion-tabs *ngIf="deviceCtrl.isMobile;else desktop">
        <ion-tab [root]="tab1Root" tabTitle="Pageone" tabIcon="contacts"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="Pagetwo" tabIcon="list"></ion-tab>
</ion-tabs>
<ng-template #desktop>
        <page-one></page-one>
        <page-two></page-two>
</ng-template>

在移动设备中它工作正常，但在浏览器中显示空白页而没有错误消息。

我预计这种行为就像可自定义的组件一样，这不起作用，因为页面有@IonicPage（）？我怎样才能使它像浏览器组件或移动设备中的Ionic页面一样工作？

提前致谢。

Answer 1

如果你有两个组件，你应该能够在没有ng-template的情况下显示它们：

    <page-one></page-one>
    <page-two></page-two>

另外，您可能想检查SplitPane。

https://ionicframework.com/docs/api/components/split-pane/SplitPane/

插入类似可自定义组件的页面

1 个答案: