基于屏幕方向的离子响应网格

Question

使用Ionic 3框架和组件、属性、属性(如果可能，没有媒体查询)，有人知道如何基于屏幕方向定义响应式网格吗？我希望当屏幕方向是“纵向”时，布局显示在一列中，当屏幕方向是“横向”时，布局显示在两列中，无论屏幕尺寸是什么。

我是使用如下所示的showWhen属性完成的，但它会让我复制每个<ion-col>中包含的代码。

有没有更好的解决方案？

<ion-grid>
  <ion-row>
    <ion-col showWhen="portrait" col-12>
    ...[content_1]...
    </ion-col>
    <ion-col showWhen="landscape" col-6 push-6>
    ...[content_1]...
    </ion-col>
    <ion-col showWhen="portrait" col-12>
    ...[content_2]...
    </ion-col>
    <ion-col showWhen="landscape" col-6 push-6>
    ...[content_2]...
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

可以使用屏幕方向插件https://ionicframework.com/docs/native/screen-orientation/了解屏幕方向类型

如果只有一行：

<ion-grid>
   <ion-row>

           // show columns in the row depending on what screen-orientation type

           <div *ngFor="let content of contents">
               <ion-col *ngIf="screen-orientation-type = 'portrait'" col-6>
                   <div text-wrap [innerHtml]="content.title"></div>
                   <div text-wrap [innerHtml]="content.body"></div>
               </ion-col>
               <ion-col *ngIf="screen-orientation-type = 'landscape'" col-12>
                   <div text-wrap [innerHtml]="content.title"></div>
                   <div text-wrap [innerHtml]="content.body"></div>
               </ion-col>
           </div>
   </ion-row>
</ion-grid>

如果要从服务器获取内容，请创建将返回内容值的api

或在ts中设置内容列表。

contents:[
    {
        title?: string,
        body?: string 
    },
    {
        title?: string,
        body?: string 
    }
];

在构造函数下的相同ts文件中：

this.contents = [
    {
        title: '<h1>Content 1</h1>',
        body: '<p>Body here</p>'
    },
    {
        title: '<h1>Content 2</h1>',
        body: '<p>Body here</p>'
    }
]

Answer 2

找到了！使用屏幕定向插件。这更好，因为我不必像以前的解决方案那样重复代码。

<ion-grid>
  <ion-row>

    <ion-col [attr.col-12]="screenOrientation.type == 'portrait-primary' ? true : null" [attr.col-6]="screenOrientation.type == 'landscape-primary' ? true : null" [attr.push-6]="screenOrientation.type == 'landscape-primary' ? true : null">
    ...[content_1]...
    </ion-col>

    <ion-col [attr.col-12]="screenOrientation.type == 'portrait-primary' ? true : null" [attr.col-6]="screenOrientation.type == 'landscape-primary' ? true : null" [attr.pull-6]="screenOrientation.type == 'landscape-primary' ? true : null" >
    ...[content_2]...
    </ion-col>

  </ion-row>
</ion-grid>