Question

我正在研究Angular 2中 md-grid-list的基本示例。

HTML代码：

<md-grid-list cols="4" rowHeight="100px">
   <md-grid-tile *ngFor="let tile of tiles"
         [colspan]="tile.cols"
         [rowspan]="tile.rows"
         [style.background]="tile.color">
         {{tile.text}}
    </md-grid-tile>
</md-grid-list>

TS代码：

export class GridListDynamicExample {
  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

以上代码导致： 如何将布局设为＆＃34;列＆＃34;这是专栏＆＃34;两个＆＃34;使用一些HTML指令或CSS？

在较小的屏幕尺寸下面的行（One和Four）下面？

Angular 1中的Angular Material可以选择通过指定＆＃34; md-cols-xs =＆＃34; 1＆＃34; MD-COLS-SM =＆＃34; 2＆＃34; MD-COLS-MD =＆＃34; 4＆＃34; MD-COLS-GT-MD =＆＃34; 6＆＃34; ＆＃34;

Answer 1

这是最简单的方法，你可以实现：）

your.component.html

<md-card class="sub-category-grid" style="padding:0px;" (window:resize)="onResize($event)">

  <md-grid-list cols="{{test}}" rowHeight="1:1">
     <md-grid-tile *ngFor="let item of Items"> 
       {{item.title}}
    </md-grid-tile>
 </md-grid-list>

</md-card>

your.component.ts

// init this var with the default number of columns
test: any = 2;

Items: any = [
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" },
    {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }
  ]


constructor() { }

ngOnInit() {

}


onResize(event) {
    const element = event.target.innerWidth;
    console.log(element);


    if (element < 950) {
      this.test = 2;
    }

    if (element > 950) {
      this.test = 3;
    }

    if (element < 750) {
      this.test = 1;
    }
  }

Answer 2

您可以向组件添加指令，然后按照这样的指令进行工作;

import { Directive, ElementRef, Input, HostListener, Output } from '@angular/core';
import * as _ from  "lodash";
@Directive({ selector: '[myResponsive]' })

export class TestDirective {
  @Input() tiles;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth < 980) {
      _.each(this.tiles, tile => {
        tile.cols = 2;
        tile.rows = 1;
      });
    } else {
      this.tiles = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
        {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}
      ];
    }
  }

  constructor(el: ElementRef) {

  }
}

您还需要将指令添加到app.module.ts

import { TestDirective } from "./test.directive";
@NgModule({
  imports: [
      ...
  ],
  declarations: [
     TestDirective
  ]

你的HTML应该是这样的

<md-grid-list cols="4" rowHeight="100px">
   <md-grid-tile myResponsive [(tiles)]="tiles" *ngFor="let tile of tiles"
         [colspan]="tile.cols"
         [rowspan]="tile.rows"
         [style.background]="tile.color">
         {{tile.text}}
    </md-grid-tile>
</md-grid-list>

Answer 3

据我所知，响应部分目前位于flex-layout项目中。此库中的一些常用实用程序将移动到材料已使用的angular / cdk。 Flex-layout项目提供了一个可观察的观察结果，您可以订阅获取断点更改的通知 - ObservableMedia。您还可以使用MediaService服务（也来自flex-layout）来断言窗口大小。

因此，此代码可以像这样实现。请注意我在切换发生时使用trackBy函数来保留原始框。

    export class AppComponent  {
      tiles: Array<Object>;
      public columns = 4;
      private subscription: Subscription;

      tilesBig = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue', id: 1},
        {text: 'Two', cols: 1, rows: 2, color: 'lightgreen', id: 2},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink', id: 3},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1', id: 4},
      ];

      tilesSm = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue', id: 1},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink', id: 3},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1', id: 4},
        {text: 'Two', cols: 3, rows: 1, color: 'lightgreen', id: 2},
      ];

      constructor(private _media$: ObservableMedia,
                  private mediaService: MediaService) {
        this.subscription = this._media$.subscribe((e: MediaChange) => {
          this.toggle();
        });
      }

      ngOnInit() {
        this.toggle();
      }

      private toggle() {
        const isSmall = this.mediaService.isActive('lt-md');
        this.columns = isSmall ? 3 : 4;
        this.tiles = isSmall ? this.tilesSm : this.tilesBig;
      }

      trackById(index: number, item: any): string { return item['id']; }
    }

您可以查看代码https://stackblitz.com/edit/angular-t325tj?embed=1&file=app/app.component.ts

Answer 4

在角度4中进行响应式设计并不像在bootstrape中那样简单。要使md-grid-list响应或应根据设备宽度更改视图，那么我们需要使用flex布局库

要清楚地知道如何在角色访问链接

的情况下如何处理反复的事情

访问http://brianflove.com/2017/05/03/responsive-angular/
演示http://run.plnkr.co/preview/cja10xr7900083b5wx6srd0r6/

响应式设计使用角度2中的md-grid-list

4 个答案:

your.component.html

your.component.ts