Angular 4 Material 2-如何使用MD-Gridlist从垂直切换到水平切换？

Angular 4 Material 2是一个用于构建现代Web应用程序的开发框架。它基于Angular框架，并提供了一套丰富的UI组件和工具，其中包括MD-Gridlist。

MD-Gridlist是Angular Material中的一个组件，用于展示网格布局的列表。它可以在垂直和水平方向上切换展示方式。下面是使用MD-Gridlist从垂直切换到水平切换的步骤：

1. 首先，确保你已经安装了Angular Material和Angular CDK（Component Dev Kit）依赖。你可以通过以下命令来安装它们：

npm install --save @angular/material @angular/cdk

1. 在你的Angular项目中，导入所需的模块。在你的模块文件（通常是app.module.ts）中添加以下代码：

import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({

 imports: [

   // 其他模块导入

   MatGridListModule

 ],

 // 其他配置

})

export class AppModule { }

1. 在你的组件模板文件中，使用MD-Gridlist组件并设置相应的属性。以下是一个示例：

<mat-grid-list cols="4" rowHeight="100px">

 <mat-grid-tile *ngFor="let item of items">

   <!-- 格子内容 -->

 </mat-grid-tile>

</mat-grid-list>

在上面的示例中，cols属性设置了每行显示的列数，rowHeight属性设置了每个格子的高度。你可以根据需要进行调整。

1. 如果你想在垂直和水平方向上切换展示方式，可以使用Angular的数据绑定和事件绑定机制。例如，你可以在组件中添加一个按钮，并在点击按钮时切换展示方式。以下是一个示例：

<button (click)="toggleOrientation()">切换展示方式</button>

<mat-grid-list cols="gridCols" rowHeight="gridRowHeight">

 <mat-grid-tile *ngFor="let item of items">

   <!-- 格子内容 -->

 </mat-grid-tile>

</mat-grid-list>

export class YourComponent {

 gridCols = 4;

 gridRowHeight = '100px';

 toggleOrientation() {

   if (this.gridCols === 4) {

     this.gridCols = 2;

     this.gridRowHeight = '200px';

   } else {

     this.gridCols = 4;

     this.gridRowHeight = '100px';

   }

 }

}

在上面的示例中，点击按钮时会调用toggleOrientation()方法，切换展示方式。

以上是使用MD-Gridlist从垂直切换到水平切换的步骤。希望对你有所帮助。

关于Angular Material和MD-Gridlist的更多信息和示例，你可以参考腾讯云的相关文档和官方网站：

• Angular Material官方文档：https://material.angular.io/
• MD-Gridlist组件文档：https://material.angular.io/components/grid-list/overview