Добавить фоновое изображение на основе ширины элемента в Angular

#angular

#angular

Вопрос:

У меня есть следующий mat-card компонент в Angular, который отображает информацию о каждом prof объекте:

 <mat-card class="mat-elevation-z4">
      <mat-card-header>
        <mat-card-title>{{prof["fullName"].length > 15 ? prof['fullName'].slice(0, 15)   '...' : prof['fullName']}}</mat-card-title>
      </mat-card-header>
</mat-card>
 

Я хотел бы знать, могу ли я добавить изображение профиля prof['imageLink'] (которое является ссылкой на изображение) на основе текущей ширины mat-card . Поэтому, если mat-card он достигнет определенной высоты, он отобразит изображение, в противном случае нет.

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

Я был бы очень признателен за любую помощь.

Комментарии:

1. вы можете отображать на основе ширины или высоты, если да, будет ли это фиксированное значение?

2. Да, если ширина достигает фиксированного значения, тогда покажите изображение по ссылке на изображение

Ответ №1:

Вы можете обернуть свою карту внутри контейнера div, а затем вы можете получить ширину карты, используя offsetWidth .

 @ViewChild("myIdentifier") myIdentifier: ElementRef;

<div #myIdentifier>
    <mat-card class="mat-elevation-z4">
        <mat-card-header>
            <mat-card-title>{{prof["fullName"].length > 15 ? prof['fullName'].slice(0, 15)   '...' : prof['fullName']}}
            </mat-card-title>
        </mat-card-header>
        <img [class.hide]="width < 500" mat-card-image [src]="prof.imageLink" alt="Photo of a Shiba Inu">
   </mat-card>
</div>
 

Вам нужно использовать ngAfterViewInit событие, чтобы получить ширину, так как только после отображения вида вы можете получить точную ширину.

 ngAfterViewInit() {
    this.width = this.myIdentifier.nativeElement.offsetWidth;
    this.cdr.detectChanges();
  }
 

Затем, основываясь на вашей предопределенной ширине, вы можете показать скрыть изображение профиля.

 <img [class.hide]="width < 500" mat-card-image [src]="prof.imageLink"/>
 

Поскольку мы обновляем представление после инициализации представления. мы получим сообщение об ошибке «Выражение ___ изменилось после проверки«.

Чтобы избавиться от этой ошибки, нам нужно вручную вызвать обнаружение изменений.

 this.cdr.detectChanges();
 

Правка1: обработка изменения размера страницы.

Если вы хотите сделать это адаптивным (при изменении размера страницы), вам необходимо обнаружить / привязать событие изменения размера браузера и обновить в нем свойство width, и оно будет работать.

 ngOnInit() {
    this.resizeObservable$ = fromEvent(window, "resize");
    this.resizeSubscription$ = this.resizeObservable$.subscribe(evt => {
        this.width = this.myIdentifier.nativeElement.offsetWidth;
    });
}
 

Обязательно удалите подписку в компоненте методом onDestroy.

 ngOnDestroy() {
    this.resizeSubscription$.unsubscribe()
}
 

Демо обновлено с последними изменениями кода.

Комментарии:

1. Спасибо за ваш ответ, но это работает только при перезагрузке веб-страницы, могу ли я заставить его работать при изменении размера веб-страницы? Например, у меня есть компонент боковой панели, при открытии он уменьшает ширину мат-карты.

2. Я попытался с помощью этого кода: ` toggleSideNav() { this.opened = !this.opened; это. ширина = это. myIdentifier.nativeElement.offsetWidth; console.log(это. width); this.cdr.DetectChanges(); }` Но почему-то всегда консоль выводит предыдущее значение (значение перед открытием, которое больше), а не текущее значение ширины,