Правильный способ работы с экранами разных размеров с угловым изгибом - PullRequest
Новая
       8

Правильный способ работы с экранами разных размеров с угловым изгибом

0 голосов
/ 01 мая 2018

Я создаю приложение Angular с помощью Angular Flex Layout. Каков наилучший способ обработки экрана разных размеров?

Я могу использовать стандартный способ, как описано здесь https://github.com/angular/flex-layout/wiki/Responsive-API. Например: fxLayoutAlign.xs="column"

Но я также могу сделать что-то вроде этого: 

(header.component.ts)

class HeaderComponent {
  constructor(public media: ObservableMedia) { }
}

(header.component.html)

<nav *ngIf="media.isActive('xs')" fxLayoutAlign="end center">
  <button mat-button color="primary" (click)="toggleSideNav()">
    <mat-icon>menu</mat-icon>
  </button>
</nav>

<nav *ngIf="media.isActive('gt-xs')" fxLayoutAlign="space-between center" class="desktop">
  <a mat-button routerLink="/">
    <span class="mat-title">Header</span>
  </a>
  <div>
    <a mat-button routerLink="/account/register">
      <mat-icon matListIcon>open_in_new</mat-icon>
      <span class="mat-h4">Register</span>
    </a>
    <a mat-button routerLink="/account/login">
      <mat-icon matListIcon>exit_to_app</mat-icon>
      <span class="mat-h4">Log In</span>
    </a>
  </div>
</nav>

Я в основном использую сервис ObservableMedia и проверяю, активен ли размер, а затем отображаю содержимое на основе этого.

Я считаю, что вторая альтернатива чище, но этот способ не представлен в вики углового сгиба.

...