angle2にテンプレートがデバイスに基づいて選択される方法はありますか？

Question

私はangle2のビューに対して1デバイステンプレートを1つ持ちたいと考えています。ブラウザのユーザエージェントに基づいた角度2で可能ですか？

Answer 1

実際に実装されるかどうかはまだ計画されていますが、まだ決定されていません。
現在、メディアクエリを使用して、たとえばngSwitchを使用して、デバイスまたは画面のサイズに応じてビューのさまざまな部分を表示できます。

あなたは、このためのメディアクエリとCSSの@importsを使用することができますも

• https://github.com/angular/angular/issues/6328
• https://github.com/angular/angular/issues/1239
• https://github.com/angular/angular/pull/4566

Answer 2

参照してください。

デバイスごとに別々のCSSファイルを作成し、テンプレートスタイルでインポートするだけで済みます。

例：

Angular2成分：

@Component({ 
    selector: 'my-comp', 
    template: `...`, 
    styleUrls: ['./style.css'] 
}) 

style.cssにおいて：device1.cssとdevice2.cssで

@import url("device1.css") screen and (min-width: 300px); 
@import url("device2.css") screen and (min-width: 800px); 

し、デバイス固有のスタイル。

CSS @importsの詳細については、https://developer.mozilla.org/en/docs/Web/CSS/@importを参照してください。

Answer 3

それは

fxHide APIでangular/flex-layoutパッケージ を使っているの代替とfxShow API

例

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

アクティブにブレークポイントは次のとおりです。

• xl、次にデフォルトのfxShowにフォールバックします。そうDIVは（「真」===値ので）、次いでDIVが隠され、
• lgを示す
• md、デフォルトfxShowへのフォールバック、そうDIVは
• smが示され、その後フォールバックデフォルトのfxShowに設定します。 （値=== '偽' であるため）

これはbreackpoint

付きリストであるので、DIVは、その後のdivが示され、

xs

に示されていますまたは ObservableMedia

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

• プリントと(max-width: 600px)モバイル ビューポートサイズで印刷するmediaQueryあります。
• xsは、モバイルビューポートサイズのmediaQueryに関連付けられたエイリアスです。