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

我希望每个设备有一个angular2视图模板，对于某些视图，所有设备可能有一个。在angular2中是否可能基于浏览器用户代理

有计划，但尚未决定是否实际实施。
目前，您可以使用媒体查询，例如

ngSwitch

，根据设备或屏幕尺寸显示视图的不同部分

另见

---

您可以将CSS@imports与媒体查询结合使用

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

例如：

角度2组件：

@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的详细信息，请参阅。

它使用的另一个包 和

及

示例

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

• 打印和

  （最大宽度：600px）

  是用于使用移动设备打印的mediaQuery 视口大小

• xs

  是与mediaQuery关联的别名，用于移动视口大小

---

他问的是模板切换，而不是CSS切换。您的建议可以通过媒体查询轻松实现，无需@import语句。是否有关于此问题的更新？（我知道你是活跃会员，知道更多关于变化的信息）这些计划已被取消。我不知道这方面有什么进展，但最近几个月我没能做到这一点。

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() { /* .... */ }
}