在angular2中是否有一种方法可以根据设备选择模板

Question

我想在angular2中为每个设备模板设置1个，对于某些视图，所有设备可能都有1个。是否可以在angular2中基于浏览器用户代理

Answer 1

有计划，但尚未决定是否实际实施 目前，您可以使用媒体查询，例如ngSwitch，根据设备或屏幕尺寸显示视图的不同部分。

另见

• https://github.com/angular/angular/issues/6328
• https://github.com/angular/angular/issues/1239
• https://github.com/angular/angular/pull/4566

Answer 2

您可以将CSS @imports用于媒体查询。

您需要做的就是为每个设备创建一个单独的CSS文件，然后以模板样式导入它。

示例：

Angular2组件：

@Component({
  selector: 'my-comp',
  template: `...`,
  styleUrls: ['./style.css']
})

在style.css：

@import url("device1.css") screen and (min-width: 300px);
@import url("device2.css") screen and (min-width: 800px);

然后是device1.css和device2.css中的设备特定样式。

有关CSS @imports的详细信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/@import。

Answer 3

另一种方法是使用angular/flex-layout包 用

fxHide API和fxShow API

示例

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>

激活的断点为：

• xl，然后回退到默认的fxShow;所以div显示
• lg，然后隐藏div（因为值===＆＃39; true＆＃39;）
• md，然后回退到默认的fxShow;所以显示div
• sm，然后回退到默认的fxShow;所以div显示
• xs，然后显示div（因为值===＆＃39; false＆＃39;）

这是包含breackpoint的列表

或使用ObservableMedia

示例

import {MediaChange, ObservableMedia} from "@angular/flex-layout";

const PRINT_MOBILE = 'print and (max-width: 600px)';

@Component({
   selector : 'responsive-component',
   template: `
      <div class="ad-content" *ngIf="media.isActive('xs')">
        Only shown if on mobile viewport sizes
      </div>
   `
})
export class MyDemo implements OnInit {
  constructor(public media: ObservableMedia) { }

  ngOnInit() {
    if (this.media.isActive('xs') && !this.media.isActive(PRINT_MOBILE)) {
       this.loadMobileContent();
    }
  }

  loadMobileContent() { /* .... */ }
}

• print和(max-width: 600px)是用于使用移动设备进行打印的mediaQuery 视口大小。
• xs是与mediaQuery for mobile viewport sizes相关联的别名。