Есть ли способ в angular2, что шаблон выбирается на основе устройства
Я хотел бы иметь 1 на шаблон устройства для представлений в angular2, а для некоторых представлений может быть 1 для всех устройств. Возможно ли это в angular2 на основе браузера user-agent
3 ответов
есть планы, но еще предстоит решить, будет ли он фактически реализован.
В настоящее время вы можете использовать медиа-запросы и, например ngSwitch
для отображения различных частей вида в зависимости от размеров устройства или экрана.
Смотрите также
вы можете использовать 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.
альтернатива, которую он использует угловой / гибкий-макет с
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
или с помощью 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 для мобильных размеров видового экрана.