Блог

Я хочу отобразить дочерний компонент в родительском компоненте, когда размер экрана меньше или равен 600 пикселей.

Родительский компонент HTML:

 <div class="small-screen">
      <app-child-component> </app-child-component>
 </div>
 

Родительский компонент SCSS

 .small-screen {
      @media screen and (min-width: 600px) {
             display: none;
     }                  
  }
 

И в ngOnInit моего дочернего компонента я сделал вызов API, чтобы получить некоторые данные с сервера.
Но в моем родительском компоненте, когда размер экрана превышает 600 пикселей (или любого размера),
вызывается API дочернего компонента, хотя мой дочерний компонент не виден, когда размер экрана превышает 600 пикселей. Я хочу вызывать API в своем дочернем компоненте только тогда, когда он виден в моем родительском компоненте. Как я могу это сделать?

отображение: нет css только скрывает элемент, но он все еще находится в DOM. Вам нужно получить ширину родительского компонента и использовать ее для отображения/скрытия дочернего компонента с помощью *ngIf

В файле parent.component.ts

 public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}
 

В parent.component.html

 <app-child-component *ngIf="innerWidth > 600"> </app-child-component>
 

Если вы хотите обновить значение внутренней ширины при изменении размера. Добавьте это в родительский компонент.

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