mobile - angular2中有没有一种方法可以根据设备选择模板

Question

我希望每个设备模板有 1 个用于 angular2 中的视图，对于某些视图，所有设备可能有 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

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

fxHide API和fxShow API

例子

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

当激活的断点是：

• xl，然后回退到默认的 fxShow；所以显示了div
• lg，则 div 被隐藏（因为值 === 'true'）
• md, 然后回退到默认的 fxShow;所以 div 显示
• sm，然后回退到默认的 fxShow；所以显示了div
• xs，然后显示 div（因为值 === 'false'）

这是带有断点的列表

或使用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 关联的别名。

Answer 3

您可以为此使用 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。