Angular 2 个基于桌面或移动设备的不同视图

Question

我正在开发网站，它的功能根据版本 desktop/mobile 略有不同。

我尝试通过@View 应用它，但看起来这个装饰器现在已被弃用。请告诉我最佳实践，如何在 Angular 2.

中实现此功能

Answer 1

目前最好的替代 @View 装饰器的方法是使用这样的 *ngIf：

<div *ngIf="isMobile">
    modile stuff
</div>
<div *ngIf="!isMobile">
    desktop stuff
</div>

Answer 2

ng2-responsive 套餐应满足您的需求：https://www.npmjs.com/package/ng2-responsive

我还没有广泛使用它，但它似乎做得不错。

@View 已合并到 @Component（很久以前）。 @Component 应该是您唯一需要的装饰器。

Answer 3

@Component({
  selector: 'my-component',
  templateUrl: "./" + (window.screen.width > 900 ? 
                     "my-component.desktop.html" : 
                     "my-component.mobile.html"),
  styleUrls: ['./my-component.css']
})

Angular 2 个基于桌面或移动设备的不同视图

Angular 2 different views based on Desktop or Mobile

angular2-template

angular