Блог

То, что я пытаюсь сделать, — это отобразить соответствующий вид / компонент в зависимости от ширины устройства. Я прикрепил прослушиватель событий и создал оператор if для отображения соответствующего ng-template на основе флага логического класса mobile , однако, когда я перетаскиваю браузер, шаблон не меняется, но событие изменения размера срабатывает…

HTML

 lt;div class="row dashboard-list-view"gt;  lt;div class="col-12" *ngIf="mobile; then mobileListBlock else desktopListBlock"gt;lt;/divgt;  lt;ng-template #desktopListBlockgt;  lt;app-dashboard-list-desktop [data]="data" [filters]="filters"gt;lt;/app-dashboard-list-desktopgt;  lt;/ng-templategt;  lt;ng-template #mobileListBlockgt;  lt;app-dashboard-list-mobile [data]="data" [filters]="filters"gt;lt;/app-dashboard-list-mobilegt;  lt;/ng-templategt; lt;/divgt;   

тс

 import { Component, Input, OnInit } from '@angular/core'; import { ResizeService } from '../../services/resize.service';  @Component({  selector: 'app-dashboard-list',  templateUrl: './dashboard-list.component.html',  styleUrls: ['./dashboard-list.component.scss'] }) export class DashboardListComponent implements OnInit {   @Input() data: any = [];  @Input() filters: any = [];    mobile: boolean = false;   constructor(private resizeService: ResizeService){}   objectKeys = Object.keys;   ngOnInit() {   this.resizeService.onResize$.subscribe(this.onWindowResize);  this.onWindowResize();   }   onWindowResize() {   console.log("Resize!")   if (window.innerWidth lt; 992) {  this.mobile = true;  } else {  this.mobile = false;  }   }  }  

Я искал похожие вопросы, но не могу понять, что я здесь делаю не так, заранее спасибо!

Обновить

Однако, когда я инициализирую приложение на мобильном устройстве, оно отображает мобильное представление. То же самое и для настольных компьютеров. Просто это событие не имеет никакого эффекта после первоначального рендеринга.

Ну, проблема была в этой строке:

this.resizeService.onResize$.subscribe(this.onWindowResize);

изменив его на:

this.resizeService.onResize$.subscribe(() =gt; this.onWindowResize());

сделал свое дело. Вероятно, это было связано с this контекстом функции-члена. Понятия не имею, почему не было выдано никакой ошибки…