Есть ли способ в angular2, что шаблон выбирается на основе устройства

Я хотел бы иметь 1 на шаблон устройства для представлений в angular2, а для некоторых представлений может быть 1 для всех устройств. Возможно ли это в angular2 на основе браузера user-agent

7
angular angular-template mobile

3 ответов

есть планы, но еще предстоит решить, будет ли он фактически реализован.
В настоящее время вы можете использовать медиа-запросы и, например ngSwitch для отображения различных частей вида в зависимости от размеров устройства или экрана.

Смотрите также

4

вы можете использовать CSS @imports с медиа-запросами для этого.

все, что вам нужно сделать, это создать отдельный CSS-файл для каждого устройства, а затем импортировать его в ваш шаблон.

пример:

компонент Angular2:

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

на style.css:

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

а затем стили устройства в device1.css и device2.стиль CSS.

посмотреть https://developer.mozilla.org/en/docs/Web/CSS/@import подробнее в CSS @imports.

1

альтернатива, которую он использует угловой / гибкий-макет с

API для fxHide и API для fxShow

пример 

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

когда активированная точка останова:

  • xl, затем откат к fxshow по умолчанию; таким образом, div отображается
  • lg, то div скрыт (так как значение === "правда")
  • md, затем откат к fxshow по умолчанию;таким образом, div отображается
  • sm, затем откат к fxshow по умолчанию; таким образом, div отображается
  • xs, затем отображается div (так как значение === 'false')

это список с breackpoint

enter image description here

или с помощью 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 для мобильных размеров видового экрана.
1