Угловой |Как динамически изменить ngTemplateOutlet для адаптивных целей - PullRequest
Новая
       42

Угловой |Как динамически изменить ngTemplateOutlet для адаптивных целей

0 голосов
/ 30 октября 2019

Я использую Angular с Angular Flexbox для создания веб-приложения.

Я использую много ng-templates для HTML-блоков кода, которые используются несколько раз для соответствия DRY (не повторять себя).

Вопрос: Можно ли изменить значение ngTemplateOutlet в зависимости от ширины экрана?

Пример: 

<ng-template #fullWidthContainer>
  <!-- code left out on purpose -->
</ng-template>

<ng-template #halfWidthContainer>
  <!-- code left out on purpose -->
</ng-template>

<!-- If width is less than medium: use 'fullWidthContainer', otherwise go with 'halfWidthContainer' -->
<ng-template [ngTemplateOutlet]="halfWidthContainer" [ngTemplateOutlet.lt-md]="fullWidthContainer"></ng-template>
<ng-template [ngTemplateOutlet]="halfWidthContainer" [ngTemplateOutlet.lt-md]="fullWidthContainer"></ng-template>

1 Ответ

0 голосов
/ 10 ноября 2019

Вы можете попробовать что-то вроде этого: 

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.width = event.target.innerWidth;
}

Прослушайте событие изменения размера окна в вашем компоненте и получите ширину окна, а затем на основе этой ширины вы визуализируете свой halfWidthContainer или fullWidthContainer. 

<!-- If width is less than medium: use 'fullWidthContainer', otherwise go with 'halfWidthContainer' -->
<ng-template [ngTemplateOutlet]="(width < 300) ? fullwidthContainer : halfWidthContainer" ></ng-template>
...