Angular 2 different views based on Desktop or Mobile

问题

I'm working on web site, that has slight different functionality based on version desktop/mobile.

I tried to apply it via @View, but it looks like this decorator is now deprecated. Please, advise me best practice, how to implement this feature in Angular 2.

回答1:

The ng2-responsive package should cover your needs: https://www.npmjs.com/package/ng2-responsive

I haven't used it extensively yet, but it seems to be doing a decent job.

@View was merged into @Component (ages ago). @Component should be the only decorator you need.

回答2:

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

回答3:

At the moment the best to replace @View decorator is using an *ngIf like this:

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

来源：https://stackoverflow.com/questions/39440694/angular-2-different-views-based-on-desktop-or-mobile