Angular 2 verschiedene Ansichten basierend auf Desktop oder Mobile

Question

Ich arbeite auf der Website, die leicht unterschiedliche Funktionalität basierend auf der Version Desktop/Mobile hat.

Ich habe versucht, es über @View anwenden, aber es sieht so aus, als ob dieser Dekorator jetzt veraltet ist. Bitte teilen Sie mir am besten Praxis, wie diese Funktion implementieren die beste in Angular 2.

Answer 1

Das ng2-responsive Paket sollte Ihre Deckung Bedürfnisse: https://www.npmjs.com/package/ng2-responsive

Ich habe es noch nicht ausgiebig verwendet, aber es scheint einen anständigen Job zu tun.

@View wurde in @Component (vor Jahren) zusammengeführt. @Component sollte der einzige Dekorateur sein, den Sie brauchen.

Answer 2

Im Moment zu ersetzen @View Dekorateur ein *ngIf wie folgt verwendet:

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

Answer 3

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