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

Question

我正在开发基于版本桌面/移动设备的功能略有不同的网站。

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

Answer 1

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

Answer 2

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

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

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

Answer 3

目前最好替换@View装饰者使用*ngIf这样：

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