使用角度柔性布局处理不同屏幕尺寸的正确方法

Question

我正在使用Angular Flex Layout构建Angular应用程序。处理不同屏幕尺寸的最佳方法是什么？

我可以使用此处所述的标准方式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服务并检查大小是否有效，然后根据该内容显示内容。

我认为我自己认为第二种选择是更干净但是这种方式并没有出现在角度灵活布局维基中。